跳到主要內容

在開發中建立 API 請求代理

注意：這個功能可以在 react-scripts@0.2.3 及更高版本中使用。

人們通常從與其後端實作相同的 host 和埠提供前端 React 應用程式。

例如，在部署應用程式後，實際設定可能如下所示

/             - static server returns index.html with React app
/todos        - static server returns index.html with React app
/api/todos    - server handles any /api/* requests using the backend implementation

不需要這樣的設定。然而，如果您有這樣的設定，則可以在開發期間撰寫類似 fetch('/api/todos') 的請求，而不必擔心將它們重新導向到其他 host 或埠。

要告知開發伺服器在開發中將任何未知請求代理到您的 API 伺服器，請將 proxy 欄位新增到您的 package.json，例如

  "proxy": "https://127.0.0.1:4000",

如此一來，當您在開發中 fetch('/api/todos') 時，開發伺服器將會辨識出它不是靜態資源，並將您的請求代理到 https://127.0.0.1:4000/api/todos 作為備份。開發伺服器只會嘗試將 Accept 標頭中沒有 text/html 的請求傳送到代理伺服器。

很方便的是，這樣可以避免 CORS 問題 和這類在開發中的錯誤訊息

Fetch API cannot load https://127.0.0.1:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://127.0.0.1:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

請注意，proxy 僅在開發階段（使用 npm start）有效，而確保在正式環境中網址如 /api/todos 指向正確位置是您的責任。你不必使用 /api 前綴。任何未識別且不含 text/html 接受標頭的請求都將重新導向至指定的 proxy。

proxy 選項支援 HTTP、HTTPS 和 WebSocket 連線。

如果 proxy 選項對你來說不夠靈活的話，您也可以

設定好代理伺服器後出現「無效的主機標頭」錯誤​

當你啟用 proxy 選項時，你等於選擇使用更嚴格的主機檢查機制。這樣做的原因是讓後端對遠端主機開放會讓你的電腦容易遭受 DNS 重新綁定攻擊。這個問題已在 此篇文章 和 此議題 中說明。

在 localhost 上開發時，這不應該會影響到你；但是如果你像 在此處所述 那樣進行遠端開發，在啟用 proxy 選項後，你會在瀏覽器中看到此錯誤訊息

無效的主機標頭

為了解決這個問題，你可以在專案根目錄建立的名為 .env.development 的檔案中指定公開的開發主機

HOST=mypublicdevhost.com

現在，如果你重新啟動開發伺服器並從指定的主機載入應用程式的話，它應該可以使用了。

如果你還是遇到問題，或是你正在使用更特殊的環境，例如雲端編輯器的話，你可以透過在 .env.development.local 中加入一行程式碼來完全繞過主機檢查。請注意，這很危險，會使你的機器更容易遭受惡意網站的遠端程式碼攻擊：

# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true

我們不建議這麼做。

手動設定代理伺服器​

請注意：此功能自 react-scripts@2.0.0 起可供使用。

如果 proxy 選項對你來說不夠靈活的話，您可以直接存取 Express 應用程式執行個體，並串聯你自己的代理伺服器中介軟體。

此功能可以搭配 package.json 中的 proxy 屬性一起使用，但建議你將所有邏輯都整合到 src/setupProxy.js 中。

首先，使用 npm 或 Yarn 安裝 http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

接著，建立 src/setupProxy.js 並將以下內容貼到其中

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // ...
};

現在您可以根據您的喜好註冊代理！以下是使用上述 http-proxy-middleware 的範例

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://127.0.0.1:5000',
      changeOrigin: true,
    })
  );
};

注意：無需在任何地方匯入此檔案。當您啟動開發伺服器時，此檔案會自動註冊。

注意：此檔案僅支援 Node 的 JavaScript 語法。請務必只使用受支援的語言功能（也就是不支援 Flow、ES 模組等）。

注意：傳遞路徑至此代理函數可讓您在路徑上使用萬用字元或模式比對，這比 Express 路徑比對來說更靈活。

編輯此頁面
上一次更新Herman J. Radtke III 在