跨域问题确认及处理

       背景如下：

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

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

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

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

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

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

        一个个聊。。。

首先什么是跨域？

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

1. 协议不同（如：http和https）

2. 域名不同（如：test.com和api.test.com）

3. 端口不同（如：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'中配置了多个值，但是只能有一个。

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

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

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

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: true
                    exposedHeaders: "Content-Disposition,Content-Type,Cache-Control"

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

        不过，最终的处理方式是使用代理服务器，两个项目规划到同一个端口下，一个用根目录（/），另一个用一个特殊前缀（/ABC）