【fetch跨域请求】cors
2017-03-26 21:03
246 查看
当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing)
请求fetch
如果服务器返回的 response 头包含 “Access-Control-Allow-Origin:*”或者
CORS的具体原理可以参考 http://www.ruanyifeng.com/blog/2016/04/cors.html
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
需要添加:
请求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(); });
相关文章推荐
- react中fetch之cors跨域请求的实现方法
- 使用fetch轻松解决JS跨域请求问题——无需CORS,jsonp
- react中fetch之cors跨域请求
- Java - Spring MVC 实现跨域资源 CORS 请求
- java利用cors实现跨域请求
- 用express实现CORS跨域(上-简单请求)
- AJAX与跨域请求CORS(JS)
- 跨域请求jsonp与cors
- Spring boot通过过滤器使用CORS实现JavaWeb跨域请求
- 启用 CORS 来解决这个问题(ajax跨域请求)
- 【原】fetch跨域请求附带cookie(credentials)
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
- 在jQuery与Node之间创建跨域请求(Cross-Origin Resource Sharing (CORS) )
- 使用cors解决跨域,ionic打包到android手机上发post请求报403错误
- cors解决跨域请求的问题
- Django跨域请求之JSONP和CORS
- 跨域请求解决方法(JSONP, CORS)
- Ajax请求的跨域(CORS)问题