【fetch跨域請求】cors

當使用fetch 發起跨域請求時，CORS（跨域資源共享Cross-origin resource sharing）

請求fetch

const body = {name:"Good boy"};
 fetch("http://localhost:8000/API",{
     headers:{
         'content-type':'application/json'
     }
     method:'POST',
     body: JSON.stringify(body)
}).then(response =>  
     response.json().then(json => ({ json, response }))
).then(({ json, response }) => {
    if (!response.ok) {
      return Promise.reject(json);
    }
    return json;
}).then(
    response => response,
    error => error
  );

如果伺服器傳回的 response 頭包含 “Access-Control-Allow-Origin：*”或者 *為與請求源相同的位址。即伺服器支援浏覽器跨域通路。若不包含需求修改伺服器端，與浏覽器端請求。

CORS的具體原理可以參考 http://www.ruanyifeng.com/blog/2016/04/cors.html

如果伺服器不支援CORS，fetch提供了三種模式，其中no-cors可以繼續通路伺服器

fetch的mode配置項有3個值，如下：

same-origin：該模式是不允許跨域的，它需要遵守同源政策，否則浏覽器會傳回一個error告知不能跨域；其對應的response type為basic。

cors: 該模式支援跨域請求，顧名思義它是以CORS的形式跨域；當然該模式也可以同域請求不需要後端額外的CORS支援；其對應的response

type為cors。

no-cors: 該模式用于跨域請求但是伺服器不帶CORS響應頭，也就是服務端不支援CORS；這也是fetch的特殊跨域請求方式；其對應的response

type為opaque。

針對跨域請求，cors模式是常見跨域請求實作，但是fetch自帶的no-cors跨域請求模式則較為陌生，該模式有一個比較明顯的特點：

該模式允許浏覽器發送本次跨域請求，但是不能通路響應傳回的内容，這也是其response type為opaque透明的原因。

注意： cors 支援三種content-type 不支援 application/json

application/x-www-form-urlencoded

multipart/form-data

text/plain

為了能将請求 text/plain的body 解析為json對象，可以參考

http://stackoverflow.com/questions/12345166/how-to-force-parse-request-body-as-plain-text-instead-of-json-in-express

對于Express提供的服務端

為了能提供CORS服務

需要添加：

//設定跨域通路  
app.all('*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1')  
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});

當使用fetch 發起跨域請求時，CORS（跨域資源共享Cross-origin resource sharing）

請求fetch

CORS的具體原理可以參考 http://www.ruanyifeng.com/blog/2016/04/cors.html

如果伺服器不支援CORS，fetch提供了三種模式，其中no-cors可以繼續通路伺服器fetch的mode配置項有3個值，如下：

same-origin：該模式是不允許跨域的，它需要遵守同源政策，否則浏覽器會傳回一個error告知不能跨域；其對應的response type為basic。cors: 該模式支援跨域請求，顧名思義它是以CORS的形式跨域；當然該模式也可以同域請求不需要後端額外的CORS支援；其對應的response type為cors。no-cors: 該模式用于跨域請求但是伺服器不帶CORS響應頭，也就是服務端不支援CORS；這也是fetch的特殊跨域請求方式；其對應的response type為opaque。針對跨域請求，cors模式是常見跨域請求實作，但是fetch自帶的no-cors跨域請求模式則較為陌生，該模式有一個比較明顯的特點：

該模式允許浏覽器發送本次跨域請求，但是不能通路響應傳回的内容，這也是其response type為opaque透明的原因。

注意： cors 支援三種content-type 不支援 application/json

application/x-www-form-urlencodedmultipart/form-datatext/plain

為了能将請求 text/plain的body 解析為json對象，可以參考 http://stackoverflow.com/questions/12345166/how-to-force-parse-request-body-as-plain-text-instead-of-json-in-express

對于Express提供的服務端為了能提供CORS服務需要添加：

//設定跨域通路 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); }); --------------------- 作者：Evan_Gu 來源：CSDN 原文：https://blog.csdn.net/gdp12315_gu/article/details/66479524 版權聲明：本文為部落客原創文章，轉載請附上博文連結！