【前后端跨域问题】

概要

前后端跨域问题同查是指在前后端分离项目中，浏览器请求后端接口时，由于没有通过同源检查，响应被浏览器弃之不用。

整体流程

• 同源检查: 只要协议、主机、端口之一不同，就不同源，例如
  • http://localhost:7070/a 和 https://localhost:7070/b 不同源
• 同源检查是浏览器的行为，而且只针对fetch、xhr请求
  • 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
  • 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
• 更多相关知识请参考
  • 跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

解决方案

1.添加响应头: 服务端在响应头添加 Access-Control-Allow-Origin：*

• 注解方式：@CrossOrigin

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MyController {

    @GetMapping("/my-endpoint")
    @CrossOrigin(origins = "http://example.com")
    public String myEndpoint() {
        return "Hello, world!";
    }
}

• 配置类方式

@Configuration
public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

2.通过nginx代理跨域(开发中采用)

由于服务器之间访问没有跨域，浏览器通过访问nginx去访问跨域地址

浏览器请求nginx提供的地址，统一由nginx根据配置对各种类型的请求进行转发

3.前端通过代理服务器自行代理转发解决

使用http-proxy-middleware中间件

小结

解决前后端跨域主要有三种方式:

1.服务端允许跨域，在响应头中添加Access-Control-Allow-Origin：*

2.通过nginx代理跨域。

3.前端通过代理服务器自行代理转发解决。