我正在嘗試使用 fetch 向我的后端發送一個 http 請求，但是即使我正在發送 application/json 標頭，它也會回傳此錯誤，需要到達 api 的內容是 json
前端代碼
let user_ = 'teste';
let email_ = '[email protected]';
let pass_ = 'teste';
let button_submit = document.getElementById('mySubmit_signup');
let headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Credentials', 'true');
button_submit.addEventListener('click', async function(){
try {
await fetch('http://localhost:8080/users', {
mode: 'cors',
method: 'POST',
body: JSON.stringify({
name: user_,
email: email_,
password: pass_
}),
})
.then(
response => response.json()
)
.then(
data => console.log(data)
)
} catch (error) {
console.log(error);
}
});
ATT：
我添加了標頭，但我收到“從源 'http://localhost:7777' 獲取在 'http://localhost:8080/users' 的訪問權限已被 CORS 策略阻止：對預檢請求的回應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。如果不透明的回應滿足您的需求，請將請求的模式設定為“no-cors”以獲取禁用 CORS 的資源。”
try {
await fetch('http://localhost:8080/users', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify({
name: "user_",
email: "[email protected]",
password: "pass_"
}),
})
.then(
response => response.json()
)
.then(
data => console.log(data)
)
} catch (error) {
console.log(error);
}
};
req();
uj5u.com熱心網友回復：
您正在將字串傳遞給body. 這意味著fetch將自動添加一個Content-Type請求標頭，說明您正在發送純文本。
您的服務器端代碼需要 JSON 并且正在拒絕您所謂的純文本并出現錯誤。
您需要顯式添加正確的標頭以表明您正在發送 JSON。
headers: {
'Content-Type': 'application/json',
},
除了不要添加到您的請求標頭中。'Access-Control-Allow-Origin': '*',這是一個回應標頭，請求中沒有任何業務。添加它會產生額外的問題。
向請求添加application/json內容型別將使其預檢。
您參考了一個錯誤，提到了預檢請求。錯誤狀態可能是由于您不正確的額外標頭（請參閱上面的旁白）引起的，或者可能是您的服務器未設定為支持任何預檢請求。
如果是后者，那么您需要調整服務器端代碼以回應預檢請求（這是 OPTIONS 而不是 POST），以授予瀏覽器發出您想要發出的 POST 請求的權限。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/512289.html
上一篇：如何將模型類回傳到串列中