我已經構建了一個 create react app atm 并且我想為它構建一個 next.js 后端。我在服務器端創建了一個 API 路由，它將進行另一個 API 呼叫并相應地創建一個回應。我不想將我的應用程式完全遷移到 nextJS。我知道 API 路由有效，因為我確實在“失眠”API 設計平臺上得到了回應。
服務器 (next.js) 位于 localhost:3000 上，CRA 位于 localhost:3001 上，當我嘗試使用 CRA 中的 'Fetch' 時，我在控制臺中收到錯誤訊息：“Access to fetch at 'http://localhost來自“http://localhost:3001”的：3000/api/getExchangeRate' 已被 CORS 策略阻止”。
我如何讓它作業？如果我犯了一些術語錯誤，我很抱歉，API 呼叫和 nextJS 對我來說是超級新的。
代碼：
//code on nextJS
import axios from 'axios';
export default async function(req, res) {
const apiData = await axios.get(
`https://api.exchangerate.host/latest?base=${req.body.from}&symbols=${req.body.to}&places=3`
);
const dataKeys = Object.keys(apiData.data.rates);
const newData = dataKeys.map((eachId) => {
return apiData.data.rates[eachId];
});
const resRate = newData[0];
res.json({ rate: resRate, date: apiData.data.date });
}
//Code on Create react app:
const testApi = () => {
const body = {
from: 'USA',
to: 'ILS'
};
console.log(JSON.stringify(body));
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
};
fetch('http://localhost:3000/api/getExchangeRate', requestOptions).then((response) => console.log(response));
};
thanks in advance!
uj5u.com熱心網友回復：
您可能需要使用以下命令將 cors 安裝到后端
npm install cors
取中間件在你的后端 app.js 中使用，如下所示
const cors = 要求（'cors'）
app.use(cors())
您可以在此處閱讀有關 CORS 的更多資訊： https ://en.wikipedia.org/wiki/Cross-origin_resource_sharing
希望這可以幫助。
將此添加到前端應用程式的 package.json 檔案中
scripts": { // ... }, "proxy": "http://localhost:3000
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/492156.html