Node.js的接口跨域的问题与解决方案，使用 CORS中间件解决跨域问题

cors 简介

CORS 是由一系列HTTP响应头组成，由这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。

浏览器的同源安全策略会阻止网页跨域获取资源，但如果接口服务器配置了CORS相关的HTTP响应头，就可以接触浏览器端的跨域访问限制。

**注意：**CORS主要在服务器端进行配置，浏览器无需做额外的配置，即可请求开启了CORS的接口。CORS在浏览器中有兼容性，ie10+ 、chrome4+、firefox3.5+。

使用 CORS中间件解决跨域问题

一、运行 npm i cors 安装中间件

二、使用 const cors = reqiure(‘cors’) 导入

三、在路由之前调用 app.use(cors( ) ) 配置中间件

CORS响应头部 Access-Control-Allow-Origin

响应头中可以携带一个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响应头部 Access-Control-Allow-Headers

默认情况下，CORS仅支持客户端发送9个请求头

如果客户端发送了额外的请求头信息，则需要在服务器端通过 Access-Control-Allow-Headers 对额外的请求头进行声明，否则请求 会失败。

// 只允许来自 http://baidu.cn的请求
res.setHeader('Access-Control-Allow-Origin','Content-Type,X-Custom-Header')//多个请求头用逗号分隔

CORS响应头部 Access-Control-Allow-Methods

默认情况下，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','*')

CORS请求的分类

一、简单请求：请求方式为GET / POST /HEAD 其中之一，且HTTP 头部信息不超过CORS允许的9个字段

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

三、简单请求和预检请求的区别:

​ 简单请求：客户端与服务器之间只会发生一次请求。

​ 预检请求：客户端与服务器会发生两次请求：先发送OPTION预检请求之后才会发起真正的请求。

JSONP接口

概念：浏览器通过< 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 的接口