节选自: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