node.js学习之cors跨域资源共享

CORS 跨域资源共享

接口的跨域问题

刚才编写的 get 和post 接口，存在一个很严重的问题，不支持跨域请求

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

1. CORS (主流的解决方案，推荐使用)

2. JSONP（有缺陷的解决方案：只支持GET请求

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

cors 是express 的一个第三方中间件，通过安装和配饰cors中间件，跨域很方便的解决跨域问题

使用步骤分为如下3步

1. 运行npm install cors 安装中间件

2. 使用const cors = require('cors') 导入中间件

3. 在路由之前调用app.use(cors()) 配置中间件

 

什么是cors

由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端js 代码跨域获取资源

浏览器的同源安全策略默认会阻止网页“跨域”获取资源，但是如果接口服务器配置了cors 相关的http 响应头，就可以解除浏览器的跨域访问限制

cors 的注意事项

1. cors 主要在服务器端进行配置，客户端浏览器无须做任何额外的配置，即可请求开启了cors的接口

2. cors 在浏览器中有兼容性，只有支持XMLHttpRequest Level2 的浏览器，才能正常访问开启了cors的服务器端接口

cors 相应头部 Access-Contorl-Aollow-Origin

相应头部中可以携带一个access-Control-Aollow-Origin 字段

 

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

例如下面的字段值将只允许来自 www.itcast。com 的请求

res.setHeader('Accesss-Control-Aollow-Origin', 'http://itcast.cn')

如果指定了access-control-allow-orgin 字段的值为通配符* 表示允许来自任何域的请求

res.setHeader('Accesss-Control-Aollow-Origin', '*')

cors 相应头部 Access-Contorl-Aollow-Headers

默认情况下，CORS仅支持客户端向服务器发送如下的9个请求头: Accept、Accept-LanguageContent-LanguageDPRDownlinkSave-DataViewport-WidthWidth Content-Type(值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)

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

 

cors 请求的分类

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

1. 简单请求

2. 预检请求

简单请求

同时满足以下两大请求，就属于简单请求 ① 请求方式：GETPOSTHEAD 三者之一 ②HTTP头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-LanguageContent-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(只有三个值application/x-www-form- urlencoded、multipart/form-datatext/plain)

预检请求

只要符号以下任何一个条件的请求，都需要进行预检请求

1. 请求方式为get post head 之外的请求method 类型

2. 请求头部中包含了自定义头部字段

3. 向服务器发送了application/ json 格式的数据

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

简单请求和预检请求的区别

简单请求的特点：客户端与服务器之间只会发生一次请求

预检请求的特点：客户端与服务器之间会发生两次请求，option 预检请求成功之后，才会发起真正的请求

回顾JSONP 的概念与特点

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

特点：

JSONP 不属于真正的ajax请求，因为它没有使用XMLHttpRequst 这个对象

JSONP 仅支持GET请求，不支持post put delete 等请求

创建jsonp 接口的注意事项

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

 

实现JSONP 接口的步骤

1. 获取客户端发送过来的回调函数的名字

2. 得到要通过JSONP形式发送给客户端的数据

3. 根据前两部得到的数据，拼接一个函数调用的字符串

4. 把上一步拼接得到的字符串，相应给客户端的 <script>标签进行解析执行

 

在网页中使用jquery 发起 jsonp 请求

调用$.ajax() 函数，提供JSONP 的配置选项，从而发起JSONP请求