如果的。 中,前端调用后台服务时,报错 ,你就是遇到了跨域问题。
跨域的产生来源于现代浏览器所通用的'’, 所谓同源策略是指。若在.
~
1. 首先明确一个概念,前端项目、后端项目、以及nginx,这就是三个server项目,他们只是互相之间交流数据;
2. 三个项目都有自己的ip:port组合,哪怕你是在同一台服务器上启动这三个server,他们的port也是不可能有一样的;
所以,前端项目,不论访问nginx还是访问后端项目,都会产生跨域问题
以下举例都是项目在同一台机器上,所以IP相同,只以端口区分前端项目(8081)、后端项目(8082)和nginx(8080)
访问地址以/resource
开头的都会被这个模块捕获,转发到http://192.168.137.189:8082
的后端项目上去。
访问地址以/js
开头的也被这个模块捕获,转发到http://192.168.137.189:8081
的前端项目上去。
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地址,跨域问题也就得到了解决。
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对于后端就相当于一个代理分发服务器。
浏览器的同源策略只记录他访问对象的ip和port, 访问其他资源如果还是这个ip:port,就不存在跨域问题,如果不是这个ip:port,就用nginx讲这个ip:port转发到要访问的ip:port,让他仍然访问这个同源策略的ip:port.
联系客服