【实战晋级】理解跨域以及工作中跨域问题的处理 - 2 预检请求

简介: 本文是第2节,紧接上1节 【实战晋级】理解跨域以及工作中跨域问题的处理 - 1。

本文是第2节,紧接上1节 【实战晋级】理解跨域以及工作中跨域问题的处理 - 1。

这个时代每个人的时间都很宝贵,为了不浪费读者的时间,需要读者自测是否需要阅读本文,如果以下问题你都 ok,那你完全可以 break了。


  1. 预检请求的基本概念、处理方式
  2. 预检请求的优化
  3. 上一节中,node 端代码的安全问题在哪里



正文开始


0e862644e5fca3dc502e51c22bb4f62e_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg



场景复现 1

用 post或者 get 发送json数据, 结果控制台报如下错误。

准备工作

  • 解决 Access-Control-Allow-Origin问题,这个是基础
  • 将请求改为发送 json
function xhrSend() {
    var xhr = new XMLHttpRequest();   //创建对象
    xhr.open('POST', 'http://localhost:8102/getdata', true);
    xhr.withCredentials=true;
    - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    + xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        console.log('state change', xhr.readyState);
        if (xhr.readyState == 4) {
            console.log(xhr.responseText);
        }
    }
    xhr.send('a=1&b=2');//发送数据
}

错误复现

请求被阻止,需要在响应求头 Access-Control-Allow-Headers内设置 content-type

82317d1c78105bfd8684d284f2e58a3d_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

分析问题

为什么在需要设置这个响应头呢?

因为发送json 数据,并且设置了请求头 content-type:application/json,就不再是简单请求,而是非简单请求,需要服务器进一步做处理。

预检请求

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

67c5e6fc07ae70c82953545ef285e028_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

解决问题

根据提示设置响应头 Access-Control-Allow-Headers:content-type

可以看到下面发送了两次请求,一次OPTIONS,一次 POST

b72891920a225b775d5a7a680297d4ab_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

OPTSION 请求

20a4b35e56983f16c32a7d7f8c6ca3d2_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

POST 请求

0f6406d1cdac4c5d5539df4bdaf25eef_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

鉴别非简单请求

不能同时满足下面两个条件的请求,就属于非简单请求

b4998315090e348383561ecd12fe9023_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg


补充说明

如果想在请求中设置自定义请求头

8feb4fad15e02bbbfc3801fbe61dd222_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

同样的方法在服务器端设置响应头即可,也可以设置多个值,用逗号间隔。

ctx.set('Access-Control-Allow-Headers', 'content-type,x-custom-header');

场景复现 2

我想用 PUT 方法发送请求。

xhr.open('PUT', 'http://10.70.65.235:8100/getdata', true);

复现问题

提示请求被阻止,PUT 方法是禁止的,需要设置响应头 Access-Control-Allow-Methods

834d85c2fbbdd737a62f601afbc7d337_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

解决问题

  • 解决 Access-Control-Allow-Origin问题,这个是基础

根据我们对非简单请求的理解,可以判断本次请求也是需要发一次预检请求。

//跨域处理
app.use((ctx) => {
    //指定一个接口和返回数据
    var path =ctx.path;
    if(path==='/getdata'){
        console.log('receive req');
        //服务端通过 ctx.headers.origin 获取请求中的origin
        ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);
        + ctx.set('Access-Control-Allow-Methods', 'PUT');
        ctx.body=JSON.stringify({
            code:0,
            msg:'success',
            data:[]
        });
    }else{
        ctx.body='welcome';
    }
});

套路总结


根据上面的几个实例,基本能总结出一些套路,正常通信的建立基本上都是服务端需要来进行调整,设置响应的响应头即可。

简单请求和非简单请求都要首先设置 Access-Control-Allow-Origin响应头,这个是基础

  1.    ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);

然后根据我们对非简单请求的理解以及控制台提示错误进行分析和处理。

预检请求优化

如果一个请求是预检请求,那么就需要和服务器通信两次,每次都多了一次请求这有点浪费啊。

不过这个问题是可以优化的。

设置 Access-Control-Max-Age,这个字段不是必须的,表示用来指定本次预检请求的有效期,单位-秒。

下面设置预检请求的有效期为60分钟,时间过后将会重新发送预检请求。

ctx.set('Access-Control-Max-Age', 3600);

aaff3e8c573841e8771ec5befcc06322_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

e0fb5a5e5b45edb179c4ae48e91112f9_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

15f6a6527f064ba620ff4b5be2bfd225_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

安全问题不得不提


在第一节的时候我们的 node 端代码存在一个问题,这段代码设置了响应头的值。

ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);//问题在这里

上面代码不难看出,虽然可以正常运行解决跨域问题,但是若在线上运行的话就有很大的问题,会导致任何人在浏览器环境都能访问此接口,正常的情况应该会有一个白名单配置,在白名单内的域名才能访问此接口。

if (canRequest(ctx.headers.origin)){
        //服务端通过 ctx.headers.origin 获取请求中的origin
            ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);
   }

最后


本小节到这里就介绍完了,简单请求和预检请求的跨域处理你了解了吗?

如果有问题可以加我的微信: 223344386 交流,另外我创建了一个前端晋级交流群,欢迎你的到来。

目录
相关文章
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
5084 1
CORS 详解,终于不用担心跨域问题了
|
27天前
|
JSON 缓存 JavaScript
如何解决跨域问题?
除了上述方法外,还有一些其他的跨域解决方案,如`postMessage` API等,可以根据具体的项目需求和场景选择合适的方法来解决跨域问题。
|
1月前
|
安全 JavaScript 前端开发
跨域问题如何解决
跨域问题是指浏览器同源策略限制了不同域名之间的资源访问。解决方法包括:1. CORS(跨域资源共享):服务器设置Access-Control-Allow-Origin响应头;2. JSONP:利用script标签不受同源策略限制的特点;3. 代理服务器:通过后端代理转发请求。
|
7月前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
180 1
|
4月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
58 0
|
7月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
59 0
Hertz踩坑记录,Hertz-CORS跨域问题
字节跳动开源框架Hertz,可能存在的CORS的跨域问题
|
前端开发 Java 应用服务中间件
项目里面怎么解决跨域的?
项目里解决跨域的方法
|
存储 前端开发 JavaScript
|
tengine 前端开发 安全