在WEB开发中，我们经常涉及到跨域的请求，解决跨域问题的方式有很多，比如有window.name、iframe、JSONP、CORS等等，就不详细展开了，涉及到 协议、端口 不一样的跨域请求方式是采用代理，这里我们重点聊聊Nginx代理的方式。

场景

本地启动了一个前后端分离的WEB应用，端口为：3000，可以通过http://127.0.0.1:3000访问前端页面，页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList，一般情况下肯定是404或者请求失败，如下图：

这种后端服务的接口存放在于其他的服务器中，比如在公司内网可以通过http://172.30.1.123:8081/api/getList访问到测试环境中的服务接口。

这种情况的请求就涉及到端口不一样的跨域了，那么我们可以利用Nginx代理请求。

Nginx代理配置参考

首先找到Nginx配置文件：

• Windows下路径就是你安装Nginx目录下找，比如我的放在C盘根目录，那就是：c:\nginx\conf\nginx.conf
• Mac系统配置文件路径在: /usr/local/etc/nginx/nginx.conf, Finder下通过Shift+Command+G，输入/usr/local/etc/nginx/进入该目录。

在Nginx配置文件中添加如下配置：

server {listen  80;server_name 127.0.0.1;

location / {proxy_pass  http://127.0.0.1:3000;
}location ~ /api/ {proxy_pass  http://172.30.1.123:8081;
}