如何使前端應用程序訪問節點服務器api

Question

我已經通過creat-react-app創建了一個前端應用程序 。
命令“ npm run start ”可以創建一個webpack-dev-server並為我的
開發的前端應用程序。 問題來了：

1. 我的前端應用程序必須從我之前創建的節點服務器中請求一些api 。
2. 默認情況下，create-react-app在端口3000上啟動webpack-dev-server
3. 我的節點服務器在端口3001上啟動
4. 直接訪問端口3001可能會導致跨域問題

我該如何從這些問題開始我的發展故事！

Answer 1

有兩種方法可以解決節點服務器中的跨域問題：

1. 使用cors節點模塊

首先安裝cors模塊。 npm install cors

然后在您的應用程序中使用它

const Express       = require("express");
const BodyParser    = require("body-parser");
const Cors          = require("cors");

const app = Express();
app.use(Cors());

app.use(BodyParser.urlencoded({ extended: false }));
app.use(BodyParser.json());

app.listen(3001, 'localhost', (err) => {
    if(err) {
        console.log(err);
        process.exit(-1);
    }
    console.log("Server listen port 8083");
});

2. 只需使用以下標題

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
    next();
});

Answer 2

使用NodeJS后端處理CORS的一種簡單方法是使用ExpressJS中間件和“ cors”擴展，如ExpressJS文檔中所述：

ExpressJS CORS指南

為了進行測試，有各種瀏覽器擴展會自動在所有請求中實現CORS標頭（Access-Control-Allow-Origin，Access-Control-Allow-Methods和Access-Control-Allow-Header）。 使用此擴展程序將使您從瀏覽器發出的所有請求都變為啟用CORS（不適用於生產，僅用於測試/開發）。

請注意，所謂的“簡單請求”（僅使用GET / HEAD / POST和以下內容類型的請求）：application / x-www-form-urlencoded，multipart / form-data，text / plain不會觸發CORS預檢請求所以他們被允許。

對於CORS的一般理解，我可以參考Mozilla MDN文檔：

Mozilla MDN CORS指南

Answer 3

解決CORS問題的最簡單方法是對cors使用npm模塊。 使用以下命令將其安裝在您的項目中：

npm i cors

然后將其包含在您的app.js文件中，如下所示：

const cors = require('cors');

然后將其用作app.js中的中間件，如下所示：

app.use(cors());

這應該做！ 希望這可以幫助！！