CORS 是由一系列HTTP响应头组成,由这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。
浏览器的同源安全策略会阻止网页跨域获取资源,但如果接口服务器配置了CORS相关的HTTP响应头,就可以接触浏览器端的跨域访问限制。
**注意:**CORS主要在服务器端进行配置,浏览器无需做额外的配置,即可请求开启了CORS的接口。CORS在浏览器中有兼容性,ie10+ 、chrome4+、firefox3.5+。
一、运行 npm i cors 安装中间件
二、使用 const cors = reqiure(‘cors’) 导入
三、在路由之前调用 app.use(cors( ) ) 配置中间件
响应头中可以携带一个Access-Control-Allow-Origin字段,其中origin参数的值指定了允许访问该资源的外域URL
// 只允许来自 http://baidu.cn的请求
res.setHeader('Access-Control-Allow-Origin','http://baidu.com')
// 使用通配符 * 表示允许来自所有域的请求
res.setHeader('Access-Control-Allow-Origin','*')
默认情况下,CORS仅支持客户端发送9个请求头
如果客户端发送了额外的请求头信息,则需要在服务器端通过 Access-Control-Allow-Headers 对额外的请求头进行声明,否则请求 会失败。
// 只允许来自 http://baidu.cn的请求
res.setHeader('Access-Control-Allow-Origin','Content-Type,X-Custom-Header')//多个请求头用逗号分隔
默认情况下,CORS仅支持客户端发起GET/POST/HEAD请求。如果客户端希望通过PUT/DELETE等方法请求服务器的资源,则需要通过
Access-Control-Allow-Methods来指明实际请求允许使用的HTTP方法
// 只允许 POST GET DELETE HEAD请求方法
res.setHeader('Access-Control-Allow-Origin','POST,GET,DELETE,HEAD')
// 允许所有的HTTP请求方法
res.setHeader('Access-Control-Allow-Origin','*')
一、简单请求:请求方式为GET / POST /HEAD 其中之一,且HTTP 头部信息不超过CORS允许的9个字段
二、预检请求:请求方式为GET / POST /HEAD 之外的Method类型、请求头中包含了自定义头部字段、向服务器发送了application/json格式的数据。
三、简单请求和预检请求的区别:
简单请求:客户端与服务器之间只会发生一次请求。
预检请求:客户端与服务器会发生两次请求:先发送OPTION预检请求之后才会发起真正的请求。
概念:浏览器通过< script >标签的 src 属性请求服务器上的数据,同时服务器返回一个函数的调用。这种请求数据的方法就叫做JSONP。
特点:JSONP不属于真正的ajax请求,因为没有使用XMLHttpRequest对象。JSONP仅仅支持GET请求。
注意事项:如果项目中已经配置了CORS 跨域资源共享,为了防止冲突必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启了CORS的接口。
app.get('/api/jsonp',(req,res)=> { }) //优先创建 JSONP 接口,这个接口不会被处理成 CORS 接口
app.use(cors( )) // 再配置 CORS 中间件,后续的所有接口会被处理成 CORS 接口
app.get('/api/get',(req,res) =>{ })// 这是一个开启了 CORS 的接口