跨域问题确认及处理

背景如下：

近期在做的项目中，有个奇怪的需求，需要在JSP项目中嵌套一个VUE项目，原因是：JSP项目是在运且不大方便重构的一个项目，新需求又想为了未来着想做一套单独的项目，无奈只能嵌套。

当项目开发差不多，需要部署时候，就忽然遇到了今天要聊的跨域问题。

项目部署时候，JSP项目和VUE项目分别分配了一个端口，当JSP项目跳转到VUE时候，登录失败了（为何是登录失败，等我换一篇细聊权限验证相关内容时候说说）。

关于此时的失败，一直没有头绪，看到返回值是200，但是F12看网络请求就是红色的一条。直到看到请求status竟然是CORS error（出问题一定要仔细看每一处提示），才定位大概方向是跨域问题。

知道范围是跨域问题导致的，但是问题来了：

什么是跨域？
跨域是怎么产生的？
一般都是如何解决的？
记得项目中经常配置跨域相关内容，但是应该配置在哪，给谁配置？

一个个聊。。。

首先什么是跨域？

当浏览器向服务器发起请求时，以下三个要素中任意一个不匹配，则会被视为跨域请求：

协议不同（如：http和https）
域名不同（如：test.com和api.test.com）
端口不同（如：8080和3000）

对上面三个要素的判断是由浏览器做的，目的是为了安全，防止出现网页中嵌套其他网站，被其他网站随意调用后出现安全问题。

跨域是怎么产生的？

我的理解：就是在一个网站里，一般只允许同一个协议、IP（域名）、端口的请求，比如：

http://192.168.0.1:8080/index
http://192.168.0.1:8080/getList
http://192.168.0.1:8080/test/info/test0001

这些请求都没问题，但是如果冒出来一个

http://192.168.0.1:8081/info/add

这时候浏览器就会认为有点问题，不能执行！感觉有点类似人体的排他反应一样。。。

跨域怎么解决呢？

1.常见处理方法之一：接受请求的项目，配置相关CORS的参数，允许某些协议、域名、端口的请求

2.常见处理方法之二：代理服务器，使用Nginx区分，不同项目，公共同一个端口，请求路径中特殊前缀来区分不同服务

3.（我没用过的）处理方式三：JSONP（限GET请求）

利用<script>标签不受同源策略限制的特性，后端返回一个函数包裹的数据

4.（我还没用过，用过websocket但是没因为处理跨域用）处理方式四：用websocket

应该配置在哪，给谁配置？

如果我们自己信任两个网站，都知道是做什么的，甚至就是自己的不同项目，如上面的例子，8080调用8081，那我们就得配置到8081上。

配置到接受的一方。

前面一顿回顾复习，到我们遇到的问题这里呢？

在F12中，除了network显示的CORS Error，还有console中报错如下：

Access to XMLHttpRequest at 'http://192.168.10.10:3000/api/auth/login?tm=123123123123&username=test&password=1111' from origin 'http://192.168.10.10:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://192.168.10.10:8080, *', but only one is allowed.

描述一下问题：从8080端口来的请求已被CORS策略终止了，请求头参数'Access-Control-Allow-Origin'中配置了多个值，但是只能有一个。

问题更具体了，我们这个服务相关关系是：

所有请求经过Nginx
到微服务的网关
到各项目

看了看配置，两处都配置了跨域相关内容。。。

Nginx：

http {include mime.types;default_type application/octet-stream;add_header 'Access-Control-Allow-Origin' '*';add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;...
}

gateway：

spring:cloud:gateway:globalcors:corsConfigurations:'[/**]':allowedOriginPatterns: "*"allowed-methods: "*"allowed-headers: "*"allow-credentials: trueexposedHeaders: "Content-Disposition,Content-Type,Cache-Control"

最终定位问题是：配置重复了