• 【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参数的值指定了允许访问该资源的外域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 对外额外的请求头进行声明，否则这次请求会失败

    1. //允许客户端额外向服务器发送Content-Type 请求头和X-Custom-Header请求头
    2. //注意：多个请求头之间使用英文的逗号进行分割
    3. 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方法。

    1. //只允许post get delete head 请求方法
    2. res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')
    3.  
    4. //允许所有http请求方法
    5. 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 ）是浏览器通过