CORS跨域请求

CORS跨域资源共享

1.使用cors中间件解决跨域问题

cors是express的一个第三方插件,通过安装和配置cors中间件 可以很方便地解决跨域问题
使用步骤分为3步:
1.运行 npm install cors 安装中间件
2.使用const cors=require(‘cors’)导入中间件
3.在路由之前调用app.use(cors())配置中间件

2.什么是CORS

cors(跨域资源共享)由一系列HTTP响应头组成,这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源

浏览器的同源安全策略默认会阻止页面“跨域”获取资源,但如果接口服务器配置了CORS相关的HTTP响应头 就可以解除浏览器的跨域访问限制
CORS跨域请求_第1张图片CORS跨域请求_第2张图片5.CORS响应头部 -Access-Control-Allow-Origin

CORS跨域请求_第3张图片CORS跨域请求_第4张图片

6.CORS响应头部 -Access-Control-Allow-Headers

默认情况下 cors仅支持客户端向服务器发送如下9个请求头:
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Tyoe(值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)

如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过Access-Control-Allow-Headers对额外的请求头进行声明,否则这次请求会失败
CORS跨域请求_第5张图片

7.CORS响应头部 -Access-Control-Allow-Methods

默认情况下 CORS仅支持客户端发起GET、POST、HEAD请求
如果客户端希望通过PUT、DELETE等方式请求服务器的资源、则需要在服务器端、通过Access-Control-Allow-Methods来指明实际请求所允许使用的HTTP方法
CORS跨域请求_第6张图片

8.CORS请求的分类

客户端在请求CORS接口时,根据请求方式和请求头的不同,可以将CORS的请求分为两大类,分别是:
1.简单请求
CORS跨域请求_第7张图片

2.预检请求
CORS跨域请求_第8张图片
简单请求和预检请求的区别
简单请求的特点:客户端和服务器之间只会发生一次请求
预检请求的特点:客户端和服务器之间会发生两次请求,OPTION预检请求成功之后,才会发起真正的请求

回顾JSONP的概念与特点

概念:浏览器通过

你可能感兴趣的:(中间件,前端,vue.js)