Express的CORS跨域资源共享

一、接口的跨域问题

解决接口跨域问题的方案主要有两种

• CORS(主流的解决方案，推荐使用)
• JSOMP(有缺陷的解决方案: 只支持 GET 请求)

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

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

使用步骤分为如下3步:

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

// 跨域资源共享
const cors = require("cors");
app.use(cors());

三、CORS 跨域资源共享 （前端不需要做任何改变）

CORS是浏览器解决跨域问题的一种策略，在CORS中，浏览器把ajax发起的请求分为简单请求和非简单请求，分别对两种请求进行处理，再将ajax请求发往服务器。

缺点：

• 设置具体地址，有局限性
• 设置多源（*）就不能允许携带cookie了

3.1. 简单请求

简单请求就是满足以下条件的：

• 请求方式为这几种：
  GET,POST,HEAD
• HTTP头信息不超出以下几种：
  Accept
  Accept-Language
  Content-Language
  Last-Event-ID
  content-type只限于三种：text/plain，multipart/form-data，application/x-www-form-urlencoded

对于简单请求，浏览器直接发出CORS请求，在头信息中增加一个字段：Origin,表示请求源域名。

• 例子：

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Host:localhost:3001
Origin:http://localhost:3000

Origin:http://localhost:3000 字段告诉服务器请求源是 http://localhost:3000，服务器就可以做出相应响应。如果服务器发现Oringin字段的源不在接受范围，就会发送一个正常HTTP回应，浏览器发现这个回应的头信息中没有包含Accsess-Control-Allow-Origin字段，就抛出一个错误，被XMLHttpRequest的onerror捕获，即跨域问题出现了。

好了，知道报错原因，我们就可以从以下方法解决跨域问题了： 概括为一句话：在服务器设置接受的源信息。

实例

• 客户端请求：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:3000';
xhr.open('GET',url);
xhr.send(null);
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果请求成功
      text.innerHTML = xhr.response;
  }
}

• 服务器设置（例子用的express）：

var express = require('express');
var test = express();
test.get('/',(req,res) => {
  res.set('Access-Control-Allow-Origin','http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.send("hello CORS.");
})

CORS请求设置的响应头字段，都以 Access-Control-开头:

• 1）Access-Control-Allow-Origin：必选
  它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

// 允许所有源进行跨域请求
res.header("Access-Control-Allow-Origin", "*");
// 或者 允许指定源进行跨域请求
res.header("Access-Control-Allow-Origin", "http://localhost:3000");

• 2）Access-Control-Allow-Methods：可选
  列举出服务器接受的请求方式。
• 3）Access-Control-Allow-Credentials：可选
  它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

• 4）Access-Control-Expose-Headers：可选
  CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

3.2. 非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

3.2.1. 预检请求

浏览器发出预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。请求头信息里面，关键字段是Origin，表示请求来自哪个源。除了Origin字段，"预检"请求的头信息包括两个特殊字段

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0..

• 1）Access-Control-Request-Method：必选
  用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

• 2）Access-Control-Request-Headers：可选
  该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

3.2.2. 预检请求的回应（服务端设置）

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

• 1）Access-Control-Allow-Origin：必选

• 2）Access-Control-Allow-Methods：必选
  它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

• 3）Access-Control-Allow-Headers
  如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

• 4）Access-Control-Allow-Credentials：可选
  该字段与简单请求时的含义相同。

• 5）Access-Control-Max-Age：可选
  用来指定本次预检请求的有效期，单位为秒。

3.2.3. 非简单请求CORS跨域示例

• 客户端发送PUT请求：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:3000';
xhr.open('PUT',url);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
xhr.onreadystatechange = () => {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    text1.innerHTML = xhr.response;
  }
}

非简单请求例子中，我设置了特殊头信息“X-Custom-Header”，告知服务器接受这个参数信息。

• 在服务器设置接受信息：

var express = require('express');
var test = express();
var responsePort = 3001;//服务器端口
test.all('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'X-Custom-Header');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.send("hello CORS.");
})

至此，对于两种请求方式，都可以实现跨域访问了。

3.3. 跨域认证

到此，我们解决了跨域问题，但是还有一个问题，有些场景我们需要携带 Cookie去请求，那这个问题如何解决呢？

• 第一步：前端请求中做如下配置：

如果使用fetch请求，需要设置 credentials 为 include

fetch('http://localhost:3000', {
  method: 'GET',
  credentials: 'include'
})

如果使用xhr请求，需要设置 withCredentials 为 true

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://localhost:3000');
xhr.send();

• 第二步：服务端响应头中设置 Access-Control-Allow-Credentials 字段为 true

res.header("Access-Control-Allow-Credentials", "true");

这样我们就可以携带 Cookie 去请求了。

四、JSONP接口

回顾JSONP 的概念与特点

概念:

浏览器端通过<script>标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP

特点:

JSONP不属于真正的Ajax 请求，因为它没有使用XMLHttpRequest这个对象
JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求

4.1. 创建JSONP接口的注意事项

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

// 优先创建 JSONP 接口[这个接口不会被处理成 CORS 接口]
app.get("/api/jsonp", (req, res) => {});
// 再配置 CORS 中间件[后续的所有接口，都会被处理成 CORS 接口]
const cors = require("cors");
app.use(cors());
// 这是一个开启了 CORS 的接口
appget("/api/get", (req, res) => {});

4.2. 实现JSONP接口的具体代码

// 优先创建 JSONP 接口[这个接口不会被处理成 CORS 接口]
app.get("/api/jsonp", (req, res) => {
  // 1，获取客户端发送过来的回调函数的名字
  const funcName = req.query.callback;
  // 2，得到要通过 JSONP 形式发送给客户端的数据
  const data = { name: "zs", age: 22 };
  // 3.根据前两步得到的数据，拼接出一个函数调用的字符串
  const scriptStr = `${funcName}(${(JSON, stringify(data))})`;
  // 4.把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
  res.send(scriptStr);
});

4.3. 在网页中使用jQuery 发起JSONP请求

$.ajax({
  method: "GET",
  url: "http:127.0.0.1/api/jsonp",
  dataType: "jsonp",
  success: function (res) {
    console.log(res);
  },
});