【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
 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  );123456789101112131415161718如果服務器返回的 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-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 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！