react前端用nginx怎么配置跨域访问后端restful api？

Question

开发机器是windows，windows中安装了centos虚拟机做restful api服务器，在浏览器中可以正常访问该api服务器：

http://192.168.33.3:8080/articles

// 20181229004601
// http://192.168.33.3:8080/articles

{
  "code": 0,
  "message": "OK",
  "data": {
    "article_list": [
      {
        "id": 15,
         "title": "hello15",
        "content": "hello world15",
        
      },
      //...
      ]
}

前端用react-create-app脚手架，可以正常访问loacalhost:3000，在react中用axios访问后端api服务器，需要做跨域设置，尝试了两种方式：

第1种：在react-create-app中的package.json中添加下面代码

"proxy": "http://192.168.33.3:8080"

这种方式在chrome控制台会出现下面错误：

GET http://192.168.33.3/articles?limit=10&offset=5 net::ERR_CONNECTION_REFUSED

第2种：使用nginx反向代理
1、在windows上安装了nginx，使用localhost:80可以正常访问，在conf/nginx.conf文件中用下面的代码添加一个反向代理服务器，并启动nginx：

//D:\workspace\nginx\conf\nginx.conf
    server {
        listen       3000;
        server_name  localhost;

        location / {
            proxy_pass http://192.168.33.3:8080/;  
        }
    }

2、使用npm start启动react-create-app脚手架，这时会说3000端口被占用。

问题：
那么，使用nginx应该怎么设置反向代理？

Answer 1

nginx跨域配置

Answer 2

首先你要了解一下什么是代理和反向代理：

正向代理：你要访问A，实际上你通过B来访问A

反向代理：你要访问A，但是实际上A/xx.img是存在C上的，所以你访问B，B帮你从C取/xx.img，从A取其他。

这里的A就是你的react服务，A-1是你的restful api，B是nginx。

所以你大概需要如下配置：

server {
        listen       3001; # 这里是你实际访问的端口
        server_name  localhost;

        location / { # 这里代表你静态资源访问的端口，也就是react服务
            proxy_pass http://192.168.33.3:3000/;
        }

        location /article { # 这里应该是你restful api的转发
            proxy_pass http://192.168.33.3:8000/;
        }
    }

然后，你需要去除你react项目中请求的前缀“http://192.168.33.3:8000/”，直接使用相对路径发送“/articles?xxx”请求。

PS： 对于后端请求建议使用统一的规则，比如 统一的前缀(/api)之类的，比较好判断和转发。