react+express實現跨域

1. 首先復習一下跨域的幾種主要方式：

a. jsonp

b. cors

c. 代理服務（開發環境下常用）

2. 代理服務器：可實現轉發請求。即瀏覽器在3000端口發出請求，通過代理轉發，將請求發送給5000端口的服務；5000端口的服務處理后，將響應返回為3000端口。

create-react-app腳手架的開發環境自帶代理服務器，只需手動配置以下代理轉發的地址端口。在package.json文件中添加：

  "proxy": "http://localhost:5000"

express的配置這里不再重復。

重啟服務，ok.

2. express post()獲取客戶端傳來的參數

參考：https://blog.csdn.net/HansExploration/article/details/80683448

app.js

+    var bodyParser = require('body-parser');
// ......
+    app.use(bodyParser.urlencoded({extended: true}));

在用到post方法的文件中，通過request.body獲取請求數據。如：/routes/login.js

router.post('/', bodyParser.json(), function(req, res, next) {
  if (req.body.username === '1234' && req.body.password === '1234' ) {
  // ......
  }
}

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面說一下，生產環境下的無跨域情況（前端和后端部署在一個服務器上）

1. 前端運行 npm run build, 生成build文件夾，復制該文件夾下的內容；

2. 后端：清空public文件夾下的內容，將復制的build文件夾下的內容粘貼於public文件夾下； 

3. 啟動后台， 瀏覽器打開相應的url。

=============================================================================================

生產環境實現跨域請求的方法： nginx反向代理

1. 為了區分前后端地址，給所有后台請求地址加上BASE="/api"

前端：

 

 后台：

 

 2. 前端代碼npm run build

3. 更改nginx配置文件nginx.conf（最關鍵的一步！！！）

server {
        # 端口號可以自己設定，不一定是80
        listen       80;
        server_name  localhost;
        # 代理所有以/開頭（除了下面的以/api開頭外）請求，轉發給3000端口
        location / {
            proxy_pass   http://localhost:3000;
        }
    　　# 代理所有以 /api 開頭的請求，轉發給5001端口
    　　location ~ /api {
        　　proxy_pass http://localhost:5001;
    　　}
}

4. 啟動nginx. （在任務管理器中，可以看到啟動的nginx進程）

 

 5. 在瀏覽器中，輸入localhost:80. nginx轉發到3000端口上獲取前端的內容，返回給前台進行顯示；當點擊按鈕，涉及后端請求了，匹配到了/api，轉發給5001端口，從后台獲取響應，前台獲得數據后進行重新渲染。