叕跨域了...

报错

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed
又又又跨域了

解决

直译：Access-Control-Allow-Origin两个星星，但是只能允许一个
查看响应果然然有多个，那就去掉一个

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: SAMEORIGIN
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
Vary: Origin
1
2
3
4
5
6
7

打开项目全局搜索，配置了两个跨域

@Configuration
public class CorsConfiguration {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration(); 	
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

去掉一个解决

当然也有可能Nginx配置有跨域：

server {
    ...
    location / {
        # 允许 所有头部 所有域 所有方法
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' '*';
        # OPTIONS 直接返回204
        if ($request_method = 'OPTIONS') {
           return 204;
       }
   }
   ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

扩展

跨域产生

项目采用的是前后端分离，如果页面直接调用后端的域名或IP，会发生跨域问题。

什么是跨域问题

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

什么是同源

所谓同源是指，域名，协议，端口均相同

http://www.sanxing.test–> http://xxxx.sanxing.test 跨域
http://www.sanxing.test–> http://www.sanxing.test 非跨域
http://www.sanxing.test–> http://www.sanxing.test:8080 跨域
http://www.sanxing.test–> https://www.sanxing.test 跨域

解决跨域问题

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。
CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10，整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信

最后：

圣人之思修，愚人之思叕