从零开始Node.js—10跨域CORS的实现

之前练习中一直使用浏览器直接发送请求，或使用ApiPost或者Postman发送请求。
但在前端开发中，常常面对的场景是点击按钮，发送请求，获取数据。

一、网页发送请求：ajax

网页发送请求通常借助于浏览器Ajax模块来实现。Ajax："Asynchronous JavaScript And XML"即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术，核心是浏览器提供的XMLHttpRequest对象。详细使用可参见文章ajax使用的四大步骤

二、跨域：发的出去，但收不到

当请求的协议、域名、端口号与当前网页主页面main.html的协议域名端口号不一样，就会涉及到“跨域”。具体表现文请求可以从客户端传到服务端，服务端可以正确响应并返回，但是响应会被浏览器拦截，不会到达网页。

跨域：不是发布出去，而是收不到，被浏览器拦截

三、配置CORS接口

跨源资源共享 (CORS)（Cross-Origin Resource Sharing）是一种基于 HTTP 头的机制，通过对接口的响应头进行设置，来配合客户端发送的各种请求。CORS 主要在服务器端对接口的响应头进行配置，客户端无须做任何额外的配置。

① 设置允许的域名

设置属性Access-Control-Allow-Origin

res.setHeader(Access-Control-Allow-Origin, '*' ) // 允许所有跨域网站的响应值
res.setHeader(Access-Control-Allow-Origin, 'www.baidu.com' ) // 跨域网站中仅允许baidu返回的响应者

② 设置允许的请求头

设置属性Access-Control-Allow-Headers
默认情况下，CORS 仅支持客户端向服务器发送如下的 9 个请求头：
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type （值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一）。如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 Access-Control-Allow-Headers 对额外的请求头进行声明，否则这次请求会失败！

res.setHeader(Access-Control-Allow-Headers, 'Content-Type, X-Custom-Header' ) // 允许所有跨域网站的响应值

③ 设置允许的请求方法

设置属性Access- Cotrol-Allow-Meyhods
默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。
如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。

res.setHeader(Access-Control-Allow-Methods, 'POST, GET, HEAD, DELETE' ) // 允许这四个方法
res.setHeader(Access-Control-Allow-Methods, '*' ) // 允许所有方法

四、CORS请求类型

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类，分别是：

• 简单请求 （下两项均满足）
  • 请求方式：GET、POST、HEAD 三者之一
  • HTTP 头部信息不超过以下几种字段：无自定义头部字段
• 预检请求（满足下面任意一项）
  • 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
  • 请求头中包含自定义头部字段
  • 向服务器发送了 application/json 格式的数据

例子
在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION请求称为“预检请求”。

响应码204，代表请求成功，但没有返回任何数据，只是浏览器的一次试探

预检请求的方法是OPTIONS，响应头中可以看到允许的方法类型 服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据，200那个

五、举例

在服务端引入cors库，这个库是由一系列响应头组成，同时包括了允许跨域，允许各种响应头和请求头

下载

npm install cors

使用

// 1.引入cors包
const cors = require('cors);
// 2.注册全局cors中间件
app.use(cors());
// 3.配置路由
app.get('/get', funA);

客户端无需多写任何配置代码，只需要采用兼容CORS的浏览器就行。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）