nginx配置代理解决浏览器跨域问题

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