fetch各類報跨域錯誤,數據沒法獲取的解決方案

一、介紹

    fetch 提供了一個獲取資源的接口 (包括跨域)。

    fetch 的核心主要包括：Request , Response , Header , Body

    利用了請求的異步特性 --- 它是基於 promise 的

 

二、用法

var request = new Request('/users.json', {
    method: 'POST',
    mode: 'cors',
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

　　

 

三、錯誤一

 

　　後端沒有設置 跨域頭部

 

　　處理方法：後端加跨域頭部

res.setHeader('Access-Control-Allow-Origin', '*'); //最簡單的設置跨域 *

　　

 

四、錯誤二

 

 

這個錯誤是是一系列的錯誤，這裏顯示的是  Content-Type，還有多是 Origin 等

 

　　處理方法：後端加容許headers頭部

    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

　　

 

五、錯誤三

 

這裏的錯誤是什麼呢，前端設置了

fetch(url,{
    credentails:true,   // 容許容許傳遞 cookie
})

 在請求時候報錯了。

 

　　錯誤方法：後端加頭部 credentials

 res.setHeader('Access-Control-Allow-Credentials', true);//告訴客戶端能夠在HTTP請求中帶上Cookie

　　

 

六、錯誤四

 

　　有時候，後端設置跨域，而且跨域設置爲 *

　　可是前端仍然會報錯，就像這個

 

　　處理方法：修改後端跨域頭部

res.setHeader('Access-Control-Allow-Origin', origin);//注意這裏不能使用 *
// origin 是你須要請求跨域資源的來源地址
// 如上面錯誤就能夠是 http://127.0.0.1:8082

　　

 

七、錯誤五

　　當咱們使用 fetch 設置 mode ：‘ no-cors ’，如：

fetch(url,{
    mode:'no-cors',   
})

　　在 network 的相應請求中，

　　有數據返回來，請求能夠看到

　　可是就是得不到數據，fetch 無反應

　　這時候在控制檯 console 上會出來這樣錯誤

 

 

 

 　　處理方法：將 no-cors 改成 cors

fetch(url,{
    mode:'cors',   
})

　　

 

8.還有一種報錯是後端返回的格式不對。

 

 

不能直接返回字符串，須要後端 toJson 下 

 

 

 

想了解更多知識(源碼等)，想知道更多精華，看看個人博客吧   https://gilea.cn/

https://blog.csdn.net/qq_38323724

http://www.javashuo.com/article/p-sfdpvknf-u.html