服务端 CORS 解决跨域

当协议、域名、端口中任一个不同时产生跨域

CORS 跨域资源共享(Cross-origin resource sharing)

参考资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS的两种请求方式

简单请求

满足以下条件

1. 请求方法是以下三种方法之一：
   • HEAD
   • GET
   • POST
2. HTTP的头信息不超出以下几种字段
   • Accept
   • Accept-Language
   • Content-Language
   • Last-Event-ID
   • Content-Type：只限于三个值（application/x-www-form-urlencoded、multipart/form-data、text/plain）

流程

浏览器在header中增加一个Origin字段，该字段说明本次请求来自哪个源。服务器根据这个值决定是否同意这次请求。如果不允许，返回一个正常的HTTP响应，浏览器根据返回的响应的头信息中是否包含Access-Control-Allow-Origin字段判断是否成功

非简单请求

不满足简单请求的条件

流程

浏览器发送一个方法为OPTIONS的预检请求，服务器根据请求头中的Access-Control-Allow-*等字段判断是否允许跨域请求。若服务器拒绝的跨域请求，会返回一个正常的HTTP响应，但是没有任何CORS相关的信息字段。浏览器会认定服务器不同意预检请求，触发跨域错误。

可以通过服务端设置Access-Control-Max-Age字段来避免频繁发送预检请求，单位：秒

服务端处理机制

1. 首先查看HTTP头部有无Origin字段
2. 如果没有，或者不允许，当成普通请求
3. 如果有且是允许的，再看是否是preflight(method=OPTIONS)
4. 如果不是preflight（简单请求），返回Allow-Origin, Allow-Credential等字段，并返回正常内容
5. 如果是preflight（非简单请求），返回Allow-Headers, Allow-Methods等

服务端的CORS解决跨域问题

在Controller上加注解 @CrossOrigin

可配置项

@AliasFor("origins")
String[] value() default {};

@AliasFor("value")
String[] origins() default {};

String[] allowedHeaders() default {};

String[] exposedHeaders() default {};

RequestMethod[] methods() default {};

String allowCredentials() default "";

long maxAge() default -1L;

统一配置

@Configuration
public class WebMvcConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");//允许任何域名
        config.setAllowCredentials(true);//允许Cookie
        config.addAllowedMethod("*");//允许任何方法
        config.addAllowedHeader("*");//允许任何头
        config.setMaxAge(1800l);//设置预检请求保持时间，避免频繁发送预检请求

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }
}

其他解决方案

vue cli3

项目根目录下新建vue.config.js文件

proxy: {
  "/api": {
    target: "http://localhost:8080/KeyWord/",// 要访问的接口域名
  }
}

在请求前加上/api/即可，详细参考Vue CLI3官方文档https://cli.vuejs.org/zh/config/#devserver-proxy

Nginx配置（没实践过，自行百度）