【问题集】前端请求接口跨域问题

问题过程

前端工程师提示跨域，要求赶紧解决。
Access to XMLHttpRequest at ‘xxx’ from origin ‘http://localhost:xxxx’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:xxxx’, ‘http://localhost:xxxx’, but only one is allowed.

复盘过程

1. 使用了NGINX代理，检查nginx配置，包含如下信息如下

    		add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
   

   这里http_origin为nginx内置变量，其值等于 request.getHeader(‘Origin’)；

   果断将http_origin替换为 *，想着全放开总可以吧，重启。

2. 前端反馈问题依旧，看着这个熟悉的错误提示，印象中之前出现过类似问题。问题的点在于multiple values，这个很重要，一直再想我哪里就multiple了，为什么不能？

3. 翻了几个类似的帖子，同时自己新建了一个项目模拟跨域，这样debug更快点。

4. 想到自己应用（Springboot）中包含CORS的配置，类似
   ···
   registry.addMapping("/**")
   .allowedHeaders("")
   .allowedMethods("")
   .allowedOrigins("*")
   .allowCredentials(true);
   ···

5. 是的重复了，我设置了两遍，应用中和nginx各设置了一遍，而且Access-Control-Allow-Origin只能是*，或者一组域。

6. 去掉nginx或者项目中的任一个配合，OK。

结论

遇到问题第一时间不是着急百度，认认真真把错误提示读3遍才是正道。

相关知识点

1. CORS是一个W3C标准，全称是跨域资源共享(Cross-origin resource sharing)，其中几个关键的header

   Response相关

   Access-Control-Allow-Origin
   Access-Control-Allow-Credentials //这个cookie作为应用状态的时候，可以check是不是它的问题
   Access-Control-Allow-Methods
   Access-Control-Allow-Headers
   Access-Control-Expose-Headers
   Access-Control-Max-Age

   Request相关

   Access-Control-Request-Method
   Access-Control-Request-Headers