開發機器是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應該怎么設置反向代理？

總結

以上是生活随笔為你收集整理的react 访问后端_react前端用nginx怎么配置跨域访问后端restful api？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。