浏览器的同源安全策略默认会组织网页“跨域”获取资源,但是如果接口服务器配置了CORS相关的HTTP响应头,就可以解除浏览器端的跨域访问限制。
我们通过GET和POST请求是不支持跨域的,目前解决接口的跨域问题主要有两种方式:
- 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请求进行预检,服务器成功响应后,才会发送真正的请求,并携带真实数据。