当使用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 版权声明:本文为博主原创文章,转载请附上博文链接!

【fetch跨域请求】cors的更多相关文章

  1. Django-缓存机制、跨域请求(CORS)、ContentType组件

    Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...

  2. 【原】fetch跨域请求附带cookie(credentials)

    HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...

  3. 跨域请求CORS

    参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS http://www.ruanyifeng.com/b ...

  4. Nginx配置跨域请求 CORS

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

  5. javascript fetch 跨域请求时 session失效问题

    javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...

  6. .NET 反向代理 YARP 跨域请求 CORS

    使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...

  7. 整站HTTPS后的跨域请求 CORS是否还有效?

    | 导语  手Q马上就要全量https了,很多业务都有跨域ajax请求的需求,原来使用的CORS头在HTTPS环境中还继续能用吗?我搜遍了谷歌.百度,都没看到有明确的答案,那么就自己来尝试一下吧. 关 ...

  8. vue下axios和fetch跨域请求

    1.在config的index.js下面进行常用跨域配置代码:proxyTable: { '/apis': { //使用"/api"来代替"http://xxxx.cn& ...

  9. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

随机推荐

  1. java 获取当前系统可用字体名称

    //获取系统的字体 public static void getLocalFontFamily(){ GraphicsEnvironment ge=GraphicsEnvironment.getLoc ...

  2. [转载] erp开发-数据查询优化方法

    系统运行环境:MSSQL 2008随着公司业务快速发展,各种业务数据如火箭般的高速增长,出现一个又一个千万行数据的表,往往大表之间的关联,耗费系统大量的磁盘io,并且会影响正常的实时业务的操作,所以我 ...

  3. Java常用日期操作

    对java中常用的日期操作进行整理. 1.日期格式化 /* * 日期格式化类(必须掌握) * API: * G Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 Mo ...

  4. 关于C#List中FindAll用法的一些简单示例

    using System; using System.Collections.Generic; public partial class List : System.Web.UI.Page { pro ...

  5. Django基础笔记

    1.准备工作 .虚拟环境设置 python3 pip install virtualenv python -m venv env(虚拟环境文件名) env\Scripts\activate pip i ...

  6. 四、Tableau如何设置数据格式

    一.要求 ‘销售额’:K为单位 ‘利润’:        M为单位,负值用括号括起来,但是正值 ‘利润率’:带百分号,负值用括号括起来仍然时负值 二.解决方案 1.‘销售额’:m为单位 2.‘利润’: ...

  7. emacs 配置.emacs

    emacs 配置.emacs (require 'package) (package-initialize) (add-to-list'package-archives '("melpa&q ...

  8. Python 面向对象的特性2-----继承

    面向对象的三大特性 1.封装 根据职责将属性和方法封装到一个抽象的类中,然后类创建一个实实在在的对象,有了对象以后,就可以访问到对象内部的属性,或者让对象来调用一个已经封装好的方法. 2.继承 实现代 ...

  9. python中的猴子补丁Monkey Patch

    python中的猴子补丁Monkey Patch 什么是猴子补丁 the term monkey patch only refers to dynamic modifications of a cla ...

  10. python 时间模块(time ,datetime,calendar)

    Python中提供了时间相关的内置模块,我们主要用的是:time模块.datetime模块和calendar模块 ⽇期格式化的标准: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(00 ...