測試我的本機 React 前端和 Node.JS 伺服器之間的連接

Question

我建立了一個 node.JS Express 伺服器，其作用是使用 API 將 JSON 傳送到我的前端。我完成了後端並將其放在AWS伺服器上。現在我只想在 React 前端工作。 我在 localhost:3000 上啟動反應並向 AWS 伺服器發出請求，但收到 CORS 錯誤，告訴我 localhost:3000 無權向該伺服器發送請求。

從來源「http://localhost:3000」取得「http://www.myawssever.fr:4000/api-url/」的存取已被CORS 策略阻止：無「存取控制」 - Allow-Origin'標頭存在於請求的資源上。如果不透明回應滿足您的需求，請將請求模式設為「no-cors」以在停用 CORS 的情況下取得資源。

我已經嘗試了多種解決方案來授權 localhost:3000 但我認為問題不是來自那裡，因為對伺服器來說 localhost:3000 就是位址本身！ 你知道我如何透過向伺服器（AWS）發送請求來從我的電腦（React 在 localhost:3000 上）測試我的背部嗎？

Answer 1

以下是解決 CORS 錯誤並啟用 React 前端與 AWS 伺服器之間通訊的組合步驟

在您的 AWS 伺服器上設定 CORS

首先，您需要設定伺服器以在回應中包含適當的CORS標頭。您需要新增帶有值「http://localhost:3000」的「Access-Control-Allow-Origin」標頭，以允許來自React應用程式的請求。

配置CORS的具體方法

設定 CORS 的確切方法取決於您使用的伺服器技術（例如 Express、Apache、Nginx）。例如，如果您使用 Express，則可以使用 cors 中介軟體。以下是如何使用 Express 設定 CORS 的範例：

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));

// Rest of your server code...

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

重新啟動您的 AWS 伺服器

配置 CORS 後，重新啟動 AWS 伺服器以套用變更。