节选自：https://segmentfault.com/a/1190000010197683，亲测有效
项目前后端分离后，前后端项目分开开发，尤其是单页面应用，前端代码会开启单独的服务器，若直接在前端项目中访问后端API，肯定会遇到因跨域不能访问的问题。
这时候，用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。
只需要配置nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样，这个服务器上所有url都是相同的域名、协议和端口。因此，对于浏览器来说，这些url都是同源的，没有跨域限制。而实际上，这些url实际上由物理服务器提供服务。
环境：CentOS 7, nginx/1.12.2
修改nginx 配置文件：/etc/nginx/nginx.conf， 添加以项选项
location / {
proxy_pass http://192.168.1.10:8080/; # 前端服务器地址
}
location /api/ {
# 所有对后端的请求加一个 api 前缀方便区分，真正访问的时候移除这个前缀
rewrite ^/api/(.*)$ /$1 break;
# 将真正的请求代理到真实的服务器地址，如 ajax 的 url 为 /api/user/1 的请求被转发到http://www.serverA.com/user/1
proxy_pass http://localhost:8080;
}
现在浏览器通过访问 nginx 地址即可打开前端页面，前端所有对后台接口的请求都会通过 nginx 转发到真正的后端服务器，
因为前后端域名一样，所以浏览器不会有跨域问题
2. nginx 代理websocket配置：
$ vim /usr/local/nginx/conf/nginx.conf
# 在http上下文中增加如下配置，确保Nginx能处理正常http请求。
location /ws {
proxy_pass http://192.168.1.117:8080/ws;
proxy_read_timeout 300s;
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_http_version 1.1;
proxy_set_header Upgrade $http_upgrade; p
roxy_set_header Connection "Upgrade";
}
111
网友评论