接口跨域问题(CORS)

浏览器的同源安全策略默认会组织网页“跨域”获取资源,但是如果接口服务器配置了CORS相关的HTTP响应头,就可以解除浏览器端的跨域访问限制。

我们通过GET和POST请求是不支持跨域的,目前解决接口的跨域问题主要有两种方式:

  1. CORS    2. JSONP

但是JSONP不支持POST请求,只支持GET请求。

(CORS 在浏览器中有兼容性。只有支持XMLHttpRequest Level2 的浏览器,才能正常访问开启了CORS的服务器端接口。(例如:IE10+, Chrome4+, FireFox3.5+ )

在路由之前配置CORS中间件:

const cors = require('cors')

CORS的响应头部:

Access-Control-Allow-Origin: <origin> | *

origin参数的值:允许访问该资源的外语URL

比如说访问百度网页:

res.setHeader('Access-Control-Allow-Origin', 'www.baidu.com')

而 * 代表允许访问任何域的请求

CORS请求的分类:

简单请求:

  • 请求方式是GET, POST ,HEAD
  • HTTP头部信息不超过以下几种字段:无自定义头部字段,Accept,Accept-Language, Content-Language, DPR, Downlink, Save-Data, Viewport-Width, Width, Content-Type

预检请求:

  • 请求方式为 GET, POST, HEAD 之外的请求 Method类型
  • 请求头中包含自定义头部字段
  • 向服务器发送了application/json 格式的数据

在浏览器与服务器正是通信之前,浏览器会先发送OPTION请求进行预检,服务器成功响应后,才会发送真正的请求,并携带真实数据。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值