fetch各種報跨域錯誤,數據無法獲取的解決方案
阿新 • • 發佈：2018-09-05
pla 簡單的 eth 博客 tar 是你 -a redirect 就是
1、介紹
fetch 提供了一個獲取資源的接口 (包括跨域)。
fetch 的核心主要包括：Request , Response , Header , Body
利用了請求的異步特性 --- 它是基於 promise 的
2、用法
var request = new Request(‘/users.json‘, {
method: ‘POST‘,
mode: ‘cors‘,
redirect: ‘follow‘,
headers: new Headers({
‘Content-Type‘: ‘text/plain‘
})
});
3、錯誤一
後端沒有設置 跨域頭部
處理方法：後端加跨域頭部
res.setHeader(‘Access-Control-Allow-Origin‘, ‘*‘); //最簡單的設置跨域 *
4、錯誤二
這個錯誤是是一系列的錯誤，這裏顯示的是 Content-Type，還有可能是 Origin 等
處理方法：後端加允許headers頭部
res.setHeader(‘Access-Control-Allow-Headers‘, ‘Origin, X-Requested-With, Content-Type, Accept‘);
5、錯誤三
這裏的錯誤是什麽呢，前端設置了
fetch(url,{
credentails:true, // 允許允許傳遞 cookie
})
在請求時候報錯了。
錯誤方法：後端加頭部 credentials
res.setHeader(‘Access-Control-Allow-Credentials‘, true);//告訴客戶端可以在HTTP請求中帶上Cookie
6、錯誤四
有時候，後端設置跨域，並且跨域設置為 *
但是前端仍然會報錯，就像這個
處理方法：修改後端跨域頭部
res.setHeader(‘Access-Control-Allow-Origin‘, origin);//註意這裏不能使用 *
// origin 是你需要請求跨域資源的來源地址
// 如上面錯誤就可以是 http://127.0.0.1:8082
7、錯誤五
當我們使用 fetch 設置 mode ：‘ no-cors ’，如：
fetch(url,{
mode:‘no-cors‘,
})
在 network 的相應請求中，
有數據返回來，請求可以看到
但是就是得不到數據，fetch 無反應
這時候在控制臺 console 上會出來這樣錯誤
處理方法：將 no-cors 改為 cors
fetch(url,{
mode:‘cors‘,
})
想了解更多知識(源碼等)，想知道更多精華，看看我的博客吧 https://gilea.cn/
https://blog.csdn.net/qq_38323724
https://www.cnblogs.com/jiebba/p/9591534.html
fetch各種報跨域錯誤,數據無法獲取的解決方案