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

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

一、网页发送请求:ajax

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

二、跨域:发的出去,但收不到

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

从零开始Node.js—10跨域CORS的实现_第1张图片

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

三、配置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请求称为“预检请求”。
从零开始Node.js—10跨域CORS的实现_第2张图片

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

从零开始Node.js—10跨域CORS的实现_第3张图片

预检请求的方法是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+)

你可能感兴趣的:(从零开始Node.js,node.js,网络安全,服务器)