【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/jsonapplication/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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！