Nginx跨域的解决方法 跨域问题产生的原因同源的目的Nginx解决跨域问题反向代理Nginx配置 Cookie跨域问题
博主开发了一个动静分离的博客，动静分离免不了静态资源和后台代码的部署，静态资源管理我用的是Nginx反向代理服务器。选择Nginx的原因是它内存消耗少、稳定性高、代码相对简单些。在项目编写的时候博主就遇到了浏览器的跨域问题，而本篇文章将讲述跨域问题的由来以及Nginx是如何解决跨域问题的。
跨域问题产生的原因跨域问题产生原因是浏览器同源策略的限制，何为同源策略，下表给出了与URL http://xiejiabin.online/admin/login.html 的源进行对比的示例：
URL结果原因http://xiejiabin.online/login.html成功路径不同，其他都相同https://xiejiabin.online/admin/login.html失败协议不同http://xiejiabin.online:8080/admin/login.html失败端口不同http://xiejiabin.com/admin/login.html失败域名不同根据上表可以了解到同源策略是三同：协议相同、端口相同、域名相同。
有了浏览器同源策略，才有了跨域限制，才使我们的信息受到保护。但是在实际开发中，我们需要突破这样的限制，因此才有了各种各样的跨域解决方法，这里就谈用Nginx的反向代理突破同源策略限制，解决跨域的问题。
同源的目的为了防止他人窃取信息，保护用户信息安全的。
Nginx解决跨域问题反向代理服务器位于用户与目标服务器之间，但是对于用户而言，反向代理服务器就相当于目标服务器，即用户直接访问反向代理服务器就可以获得目标服务器的资源。同时，用户不需要知道目标服务器的地址，也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速，即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载，提高访问效率.
反向代理反向代理其实就是代理服务器来接受客户端的请求，然后将请求转发给内部网络上的服务器，最后将内部网络的服务器上得到的结果返回给客户端。此时，代理服务器对外就表现为一个服务器。Nginx就是一个很好的反向代理服务器。
Nginx配置 location /blog/{add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';proxy_pass http://localhost:8080/myblog/;}上面的代码就是我的Nginx的跨域配置，其中CORS配置一定要放在proxy_pass前面。
Access-Control-Allow-Origin：（必须字段）它的值要么是请求时Origin的值，要么是 *，表示接受任意域名的请求。如果要发送Cookie，不能设置为 * ，必须指定明确的，与请求网页一致的域名。同时，Cookie依然遵守同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传。Access-Control-Allow-Credentials：（可选字段）它是一个bool值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发送到服务器，一方面要服务器同意，指定为true；另一方面，前端必须在AJAX请求中打开withCredentials属性。 $.ajax({url: "http://localhost:8080/selectUser",type: "GET",xhrFields: {withCredentials: true},crossDomain: true,success: function (data) {//处理返回结果} });（其中，crossDomain: true, xhrFields: {withCredentials: true}是必备的）
Access-Control-Allow-Methods，OPTIONS一定要有的，另外一般也就GET和POST，如果你有其它的也可加进去。 Cookie跨域问题好了，前面的基本跨域问题已经解决了，但是到了后面进行登录操作的时候，cookie丢失了。经过一番面向百度编程，最终代码为：
location /blog/{ add_header 'Access-Control-Allow-Origin' $http_origin; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; proxy_pass http://localhost:8080/myblog/;proxy_cookie_path /myblog/ /blog/; # myblog 是我的项目名}参考文章：https://www.jianshu.com/p/413a2f11828d
原文链接（发布地址）:https://xiejiabin.online/blog.html?blogId=202007010009