我使用 netlify 作為前端，使用 heroku 和 Next.js 作為后端
在前端，我發送這樣的獲取請求：
fetch(`https://backendname.herokuapp.com/data`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({"category":"_main"})
}).then(...);
在我pages/api/data.js的后端：
export default function handler(req, res) {
req.body=JSON.parse(req.body);
res.setHeader("Access-Control-Allow-Origin", "https://frontendname.netlify.app/");
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.setHeader(
'Access-Control-Allow-Headers',
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
)
if(req.method!='POST')
return res.end();
res.json({...})
}
我什至將它添加到我的 next.config.js 中：
module.exports = {
async headers() {
return [
{
// matching all API routes
source: "/api/:path*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "https://frontendname.netlify.app/" },
{ key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
]
}
]
},
reactStrictMode: true,
}
但我收到此錯誤：
從源“https://frontendname.netlify.app”獲取“https://backendname.herokuapp.com/data”的訪問權限已被 CORS 政策阻止：對預檢請求的回應未通過訪問控制檢查：否請求的資源上存在“Access-Control-Allow-Origin”標頭。如果不透明回應滿足您的需求，請將請求的模式設定為“no-cors”以在禁用 CORS 的情況下獲取資源。
我試圖不使用任何第三方軟體包，如這個問題
uj5u.com熱心網友回復：
問題）
https://frontendname.netlify.app/是不是一個原點。因為 CORS 中間件觀察到之間的不匹配
- 您請求的實際來源 (
https://frontendname.netlify.app)，以及 - 您在 CORS 配置 (
https://frontendname.netlify.app/) 中允許的“來源” ，
它沒有設定Access-Control-Allow-Origin回應頭，這會導致預檢失敗。
您似乎還在多個位置設定了 CORS 標頭，這不是一個好主意。
解決方案
在Access-Control-Allow-Origin標頭中設定的值中洗掉尾部斜杠，并且不要在回應中指定重復的 CORS 標頭。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/385929.html
標籤：javascript 英雄联盟 下一个.js 科斯 网路化