【Node.js】解决接口跨域问题（CORS和JSONP）

目录

什么是CORS

CORS的注意事项

CORS响应头部

Access-Control-Allow-Origin

Access-Control-Allow-Headers

Access-Control-Allow-Methods

CORS的简单请求和预检请求

简单请求

预检请求

什么是JSONP

实现JSONP接口的步骤

---

解决跨域主要方案

CORS（主流方案）

JSONP（只支持get请求）

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

cors是Express的一个第三方中间件。通过安装和配置cors中间件，可以很方便地解决跨域问题。

使用步骤分为如下三步：

1. 运行 npm install cors 安装中间件
2. 使用  const cors = require('cors') 导入中间件
3. 在路由之前 调用app.use(cors()) 配置中间件

什么是CORS

CORS（Cross-Origin Resource Sharing,跨域资源共享）是由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。

接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制。

CORS的注意事项

1. CORS主要在服务器端进行配置，客户端浏览器无须做任何额外的配置，即可请求开启了CORS的接口
2. CORS在浏览器有兼容性，只支持XMLHttpRequestLevel2的浏览器，才能正常访问开启CORS的服务端接口。

CORS响应头部

Access-Control-Allow-Origin

响应头部中可以携带一个Access-Control-Allow-Origin字段，语法如下：

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

origin参数的值指定了允许访问该资源的外域URL

例如下面的字段只允许来自http://itcast.cn的请求

res.setHeader('Access-Control-Allow-Origin','http://itcast.cn')

* 号代表通配符，代表可以允许所有域的访问

res.setHeader('Access-Control-Allow-Origin','*')

Access-Control-Allow-Headers

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

Accept、Accept-Language、Content-Language、DPR、Downlink、Sava-Data、Viewport-Width、Width、Content-Type（值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一）

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

//允许客户端额外向服务器发送Content-Type 请求头和X-Custom-Header请求头
//注意：多个请求头之间使用英文的逗号进行分割
res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')

Access-Control-Allow-Methods

默认情况下，CORS仅支持客户端发起GET、POST、HEAD请求

如果客户端希望通过PUT、DELETE等方式请求服务器的资源，则需要在服务器端，通过Access-Control-Allow-Methods来指明实际请求所允许使用的HTTP方法。

//只允许post get delete head 请求方法
res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')

//允许所有http请求方法
res.setHeader('Access-Control-Allow-Methods','*')

CORS的简单请求和预检请求

简单请求

同时满足以下两个条件的请求，就属于简单请求（只需要发送一次请求）

1. 请求方式：GET、POST、HEAD三者之一
2. HTTP头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Sava-Data、Viewport-Width、Width、Content-Type（值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded）

预检请求

只要符合以下任何一个条件的请求，就是预检请求（需要发送两次请求，第二次才是真实的数据）

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

在浏览器与服务器正式通信之前，浏览器会发送OPTION请求进行预检，以获知服务器是否允许该实际请求，所以这一次OPTION请求称为“预检请求”，服务器成功响应预检请求之后，才会发送真正的请求，并且携带真实数据。

什么是JSONP

JSONP（JSON with Padding ）是浏览器通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。

特点：

1. JSONP不属于真正的ajax请求，因为它没有使用XMLHttpRequest这个对象
2. JSONP仅支持GET请求。

注意事项：

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口。否则JSONP接口会被处理成开启CORS的接口。 

//优先创建jsonp接口（这个接口不会被处理成CORS接口）
app.get('/api/jsonp',(req,res)=>{})

//再配置cors中间件（后续的所有接口，都会被处理成CORS接口）
app.use(cors())

//这是一个开启了CORS的接口
app.get('/api/get',(req,res)=>{})

实现JSONP接口的步骤

1. 获取客户端发送过来的回调函数的名字
2. 得到要通过JSONP形式发送给客户端的数据
3. 根据前两步得到的数据，拼接出一个函数调用的字符串
4. 把上一步拼接得到的字符串，响应给客户端<script>标签进行解析执行

app.get('/api/jsonp',(req,res)=>{
   //第一步
   const funcName = req.query.callback
   //第二步
   const data = { name:'qiaoyang',age:24}
   //第三步
   const scriptStr=`${funcName}(${JSON.stringify(data)})`
   //第四步
   res.send(scriptStr)
})