位置: IT常识 - 正文
nginx跨域(nginx解决跨域问题原理)
编辑：rootadmin推荐整理分享nginx跨域(nginx解决跨域问题原理)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:nginx解决跨域问题原理,nginx解决跨域的常用方案,Nginx跨域,Nginx跨域,Nginx跨域,nginx跨域问题怎么解决,nginx跨域问题怎么解决,nginx跨域设置,内容如对您有帮助，希望把文章链接给更多的朋友！
如果项目没做前后端分离，是不会有跨域问题的。前后端分离的项目中，前端调用后台服务时，报错 No 'Access-Control-Allow-Origin' header is present on the requested resource，你就是遇到了跨域问题。另外，前端调试强烈推荐使用chrome，使用QQ浏览器遇到过跨域访问不了但是不报错的坑爹事件。
1.2 为什么有跨域问题浏览器的同源策略拒绝了我们的请求。 所谓同源是指，域名，协议，端口相同，浏览器执行一个脚本时同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报上面的异常，提示拒绝访问。这是为了同一浏览器打开多个网站时，保护你的A网站登陆信息不被B网站拿去访问A网站，B网站登陆信息同理。
1.3 怎么解决跨域问题网上的文章对于解决跨域问题的介绍都很详细了。但对于使用Nginx解决跨域大多写的不太详细或者太详细以至于干扰因素太多，看了容易造成误解。这里做个总结。
2.使用nginx解决跨域问题2.1 先明确几个概念首先明确一个概念，前端项目、后端项目、以及nginx，这就是三个server项目，他们只是互相之间交流数据；三个项目都有自己的ip：port组合，哪怕你是在同一台服务器上启动这三个server，他们的port也是不可能有一样的；所以，前端项目，不论访问nginx还是访问后端项目，都会产生跨域问题。2.2 解决跨域问题以下举例都是项目在同一台机器上，所以IP相同，只以端口区分前端项目(8081)、后端项目(8082)和nginx(8080)。
2.2.1 方法1：在nginx中配置地址重写(或者转发也行)访问地址以/video_resource开头的都会被这个模块捕获，转发到http://192.168.137.189:8082的后端项目上去。例如此时访问http://192.168.137.189:8080/video_resource/userList/engineer，就会转发到http://192.168.137.189:8082/userList/engineer。访问地址以/js开头的也被这个模块捕获，转发到http://192.168.137.189:8082的前端项目上去。
server{listen 8080;location /resource {rewrite ^/resource/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8082/; # 转发地址}location /js {rewrite ^/js/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8081/; # 转发地址}}
此时统一通过nginx访问前后端项目，通过/js标识转发到前端项目，通过/resource标识转发到后端项目。浏览器同源策略记录的就是http://192.168.137.189:8080/，浏览器也只访问这个nginx的8080地址，跨域问题也就得到了解决。
2.2.2 方法2：nginx中添加允许跨域请求头server{listen 8080;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;location /resource {rewrite ^/resource/?(.*)$ /$1 break;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://192.168.137.189:8082/; # 转发地址}}这就和不用nginx，直接在后端项目中(tomcat或者自己写的服务端代码)配置允许跨域一样，只不过把允许跨域的配置放在nginx中，这个配置解决了前端项目访问nginx的跨域问题，而nginx访问后端项目不存在跨域问题(不是浏览器，没有同源策略限制)。此时nginx对于后端就相当于一个代理分发服务器。
3.参数解释3.1 Access-Control-Allow-Origin服务器默认是不被允许跨域的。给Nginx服务器配置`Access-Control-Allow-Origin *`后，表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。3.2 Access-Control-Allow-Headers 是为了防止出现以下错误：Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了”application/json”的类型请求导致的。这里涉及到一个概念：预检请求(preflight request),请看下面”预检请求”的介绍。
3.3 Access-Control-Allow-Methods 是为了防止出现以下错误：Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
3.4 给OPTIONS 添加 204的返回，是为了处理在发送POST请求时Nginx依然拒绝访问的错误发送”预检请求”时，需要用到方法 OPTIONS ,所以服务器需要允许该方法。
4.总结浏览器的同源策略只记录他访问对象的ip和port，访问其他资源如果还是这个ip：port，就不存在跨域问题，如果不是这个ip：port，就用nginx讲这个ip：port转发到要访问的ip：port，让他仍然访问这个同源策略的ip：port。
参考文献:https://www.jianshu.com/p/1080014a234f
https://segmentfault.com/a/1190000012550346
上一篇：React 面向组件编程（上）(react组件定义)
下一篇：修改Vue项目运行的IP和端口(怎么调试vue项目)
