解决跨域问题

概述

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

同源策略

协议、域名、端口都要相同，其中有一个不同都会产生跨域。

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名	是
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名，不同文件夹	是
http://www.a.com:8888/a.js http://www.a.com/b.js	同一域名，不同端口	否
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	否
http://www.a.com/a.js http://70.25.35.18/b.js	域名与域名映射ip	否
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	否
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名(同上)	否
http://www.a.com/a.js http://www.baidu.com/b.js	不同域名	否

解决跨域(一) Nginx反向代理

反向代理，用nginx将请求转发。

解决跨域(二) 配置当次请求允许跨域

添加响应头

• Access-Control-Allow-Origin: 支持哪些来源的请求跨域
• Access-Control-Allow-Methods: 支持哪些方法跨域
• Access-Control-Allow-Credentials: 跨域请求默认不包含cookie，设置true可以包含cookie
• Access-Control-Expose-Headers: 跨域请求暴露的字段
  • CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，必须在Access-Control-Expose-Headers里指定
• Access-Control-Max-Age: 表明该相应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预请求。注意: 浏览器自身维护了一个最大的有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

解决跨域代码

@Bean
public CorsWebFilter corsWebFilter() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.setAllowedOrigins(Collections.singletonList("*"));
    corsConfiguration.setAllowedHeaders(Collections.singletonList("*"));
    corsConfiguration.setAllowedMethods(Collections.singletonList("*"));
    corsConfiguration.setAllowCredentials(true);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", corsConfiguration);
    return new CorsWebFilter(source);
}

注意：Spring版本为5.2.3.RELEASE，UrlBasedCorsConfigurationSource全类名org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource。