详谈跨域问题

项目场景：

项目场景：你本地vue的项目需要和后台进行联调测试

---

问题描述

因为你修改的频率比较高，可能需要你多次打包并且部署在nginx服务器上。但是你实际上并不想这么做，你想刚修改完成就能看到效果，并且能够正确请求到服务器接口。

原因分析：

这种情况下极有可能出现跨域的问题。

出现这种问题呢，究其根本原因是因为浏览器的同源限制策略，不关服务器的事情。服务器在任何时候都是默认情况支持任何来源的请求的。除非你自己去配置一些参数，或者禁止一些域的访问。

现代浏览器要求不同源的请求禁止访问其资源。

不管同不同源，实际上请求已经到达了服务器，这个你本身可以通过断点或者日志查看到，一个可以看你服务的接口的日志输出，一个可以看tomcat的access日志输出，可以看到接口到达，并且浏览器请求的接口返回状态是200。

那为什么返回的时候F12看不见呢，就是浏览器请求接口（预检）的响应头中没有某个参数值，具体参数w3c的cros策略，所以浏览器不给你解析，并且抛出不同源，跨域的问题，可在console看到。

你一个get请求，直接在浏览器输入请求地址，却能正常返回，这种不存在跨域的概念，没有来源这个属性。而在npm run serve 运行的vue项目中写了这个请求，并且在浏览其中打开vue写的页面，会出现跨域的错误。

postman 也是如此，根本不关心你安全不安全，没有预检请求这么个概念，只管获取资源即可。

解决方案：

上面我们分析到是浏览器的问题

1、从浏览器的角度解决
那就不要发这个预检请求，或者我本身就不考虑安全问题，不需要你的同源限制策略，那么关闭就行了。

这里说的是Chrome配置，其他浏览器请自行搜索。先不要动你原来Chrome配置，创建一个新的快捷方式，
右键属性，添加 启动参数  --disable-web-security --user-data-dir=C:\user
我自己的添加完成是这样的
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\user

后面这个目录 任意位置任意文件即可，就是存放你的个人隐私的，比如历史记录什么的。

看到这个就OK了

2、从服务器的角度
（1）tomcat 配置 修改 web.xml
只要是添加corsfilter过滤器，给增加一个参数配置，就是把响应体里面的响应头参数加上，告诉浏览器访问是被允许的。我记得不需要什么jar,可自行查阅

 <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET,POST,Options</param-value> 
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping> 

（2）服务配置跨域
就是平时我们代码去配置的，这个就比较多了，只要给响应体加上

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Credentials", "true");

String headers = "Origin, Accept-Language, Accept-Encoding,X-Forwarded-For, Connection, Accept, User-Agent, Host, Referer,Cookie, Content-Type, Cache-Control";

response.setHeader("Access-Control-Allow-Headers", headers);

response.setHeader("Access-Control-Request-Method", "GET,POST");

这些参数我记得没这么多，其他参数来了解一下，加那儿都行，过滤器也行，直接写在接口也行，主要看规范和你的代码风格。

response.setHeader("Access-Control-Allow-Origin", "*");

最简单的就是springboot项目直接加 @CrossOrgin

一般情况下生产环境的都是同源，但是偶尔有不同源的。并且大公司中的顶级域名都是一样的，只是到最后解析成不同的ip+port了。

（3）vue配置代理
假装是同源的。
这个尝试了很久，没解决不知道问题出在什么地方。