通过Nginx反向代理跨域

GeniusFunny 4月 08, 2018

由于项目前后端分离且后端真实接口已出，所以我开发时首先考虑通过跨域获取真实接口数据配合前端开发。（赶工期啊：）
根据create-react-app官方提示，在package.json中添加字段
"proxy": "http://admin.xiaoyaoeden.top"
emmm
🤭无效 😂
所以改为使用Nginx反向代理跨域😊
current origin：http://localhost:3000
target origin：http://admin.xiaoyaoeden.top

安装

brew install nginx

修改配置

首先进入nginx的配置文件

vim /usr/local/etc/nginx/nginx.conf

增加如下一个server

server {
       listen       3001;
       server_name  localhost;

        location / {
           proxy_pass http://localhost:3000;
        }

        location /api/ {
           add_header Access-Control-Allow-Origin *;
           proxy_pass http://admin.xiaoyaoeden.top;
        }
    }

重启Nginx服务

1	nginx -s reload

测试

打开localhost:3001，跨域问题解决了，现在可以开开心心的测试接口啦