老板直呼内行，nginx和cors解决跨域问题

跨域概念

协议，IP，端口号。

三者有一个不同，就存在跨域行为。

跨域场景

协议不同

HTTP、HTTPS协议。

IP不同

你在本地跑你的前端项目，访问阿里云上的后台项目，两个ip不一样，存在跨域问题。

端口号不同

比如前后端分离项目

前端 localhost:8080

后端 localhost:8090

在前端页面，在localhost:8080里边，我要访问别的域localhost:8090，就存在跨域问题。

跨域存在必要性

同源策略，是浏览器最基础的最核心的安全功能。

同源策略，限制了A源与B源之间的数据交互。

如果没有同源策略，浏览器很容易受到XSS、CSFR等攻击。

我举个例子。

以登录来说明跨域存在的必要性。

登录一个商城后，服务端会在响应头加入Set-Cookies字段，然后下次访问服务端的时候，请求头中就会带着这个cookies，表明已经登录过，可以正常访问。

在没有同源策略的情况下，如果此时页面上跳出来了一个非法链接，你点进去了，这个非法链接就可以获取你的cookies信息，之后用你的账号疯狂买买买。

在有同源策略的情况下，商城的源与非法链接的源是不可以进行数据交互的，非法链接没办法获取你的信息。

如何解决

前端解决

使用Nginx配置反向代理解决跨域问题。

nginx一大重点功能就是反向代理。

比如:

前端项目：localhost:8080

后端项目：localhost:8090

现在localhost:8080里边，访问8090端口，产生了跨域问题。

在8080里边，只能访问8080的东西，那么我就让nginx时刻监听着8080端口号，然后将来自8080的请求，根据不同的location，代理向8090服务器。

由nginx代理服务器，帮你访问8090端口，然后获取返回数据，再传给你8080，nginx帮你解决了8080直接访问8090产生的跨域问题，那么问题来了，nginx怎么实现的这个功能呢？俺也不知道。

后端解决

使用CORS跨域资源共享解决跨域问题。

前提条件：

CORS通信需要浏览器和服务器端共同进行配合。

浏览器端不用你管，只要不是IE10以下，浏览器默认支持CORS通信。

所以你需要做的就是在服务器端进行处理。

思路和实现：

明确一点：CORS本质就是对请求头和响应头进行处理。

浏览器自己会在请求头里边加入一些信息，请求头里本身就包括，比如Origin，Access-Control-Request-Headers等。服务器根据自己配置的跨域规则对这些信息进行判断，是否允许其进行跨域，若允许，在访问完成后，服务响应的时候，再在头里边加入一些信息。加入什么信息呢，响应头是有很多东西的，比如Access-Control-Allow-Credentials，Access-Control-Allow-Origin等。

比如在网关中，配置CORS配置类，在application.yml文件中，添加允许的源，允许的请求类型，

当浏览器发生跨域请求时，经过网关，使用spring mvc的CorsFilter，对源进行判断和处理，就可以成功完成数据的交互。

记住下边这两行代码就可以了。

一个是配置，配置允许哪些源，是否允许携带cookie，允许其你去的类型，允许头信息，有效期等内容。

一个是资源，对哪些资源（url，一般会使用/**表示所有资源）使用哪些配置（上边的配置）。

 CorsConfiguration config = new CorsConfiguration();
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 ojbk，cors解决跨域问题完成。