您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

理论与实践相结合彻底理解CORS

时间:2021-03-24 16:26:05  来源:  作者:

跨域问题一直是面试中的经典问题,不管是前端老鸟还是新鸟都碰到过。其中针对跨源Ajax请求中有一个终极解决办法——CORS(跨源资源共享)大家肯定也不陌生,一说这个名词,我们就会哗啦哗啦说出来一套又一套的理论知识,但是这些理论知识很多我们做的仅仅是去背诵,很少去验证每一个理论点,本节我们将通过实验的方式去验证这些理论点,通过理论与实践相结合的方式彻底理解CORS。

一、理论知识

既然是CORS,背背这些理论点肯定不为过吧,我就用三幅图对这个理论进行一些简单的总结

1.1 请求类型

1.1.1 简单请求

理论与实践相结合彻底理解CORS

 

1.1.2 非简单请求

理论与实践相结合彻底理解CORS

 

1.2 请求如何带上Cookie信息

理论与实践相结合彻底理解CORS

 

二、实验

为实验做好前期准备工作,包含一个html页面和一个服务器程序,其中html访问网址为http://127.0.0.1:8009; 服务器监听端口为:8010.

  1. html页面初始代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test CORS</title>
    </head>
    <body>
        CORS
        <script src="https://code.bdstatic.com/npm/axIOS@0.20.0/dist/axios.min.js"></script>
        <script>
            axios('http://127.0.0.1:8010', {
                method: 'get'
            }).then(console.log)
        </script>
    </body>
</html>
  1. 服务器端代码(用express框架
const express = require('express');

const App = express();

app.get('/', (req, res) => {
    console.log('get请求收到了!!!');
    res.send('get请求已经被处理');
})
app.listen(8010, () => {
    console.log('8010 is listening')
});

2.1 实验一

实验目的:

非同源会产生跨域问题

跨域是浏览器对响应拦截造成的

  1. 首先来看看浏览器控制台内容
理论与实践相结合彻底理解CORS

 

控制台内容显示报错,报错内容是跨域,这是因为端口不同(一个8009一个8010),两者不同源,所以导致跨域,验证了实验目的1.

  1. 紧接着来瞅瞅服务器控制台打印了啥内容
理论与实践相结合彻底理解CORS

 

控制台内容打印了接收到了get请求,则证明浏览器的请求发出了并被服务器端正常接收,从侧面证明了跨域是浏览器对响应进行了拦截,从而验证了实验目的2.

2.2 实验二

实验目的

服务器配置
Access-Control-Allow-Origin会解决跨域问题

浏览器通过响应头中是否包含
Access-Control-Allow-Origin这个响应头的值与请求头中Origin是否相等来确定是否能够进行跨域访问

  1. 首先来搂一眼请求头
理论与实践相结合彻底理解CORS

 

  1. 紧接着再来搂一眼响应头
理论与实践相结合彻底理解CORS

 

按照理论来说,请求头中的Origin字段表示本次请求来自哪个源(协议+域名+端口),服务器根据这个值来决定是否同意这次请求。如果Origin指定的源不在许可范围内,服务器会返回一个正常的HTTP回应。目前并没有修改,还处于报错状态,该响应确实是一个正常响应,不包含
Access-Control-Allow-Origin字段,但是这也不足以说服我浏览器是通过验证该字段来确实是否允许跨域请求。所以紧接着需要做一个对比试验,通过修改服务端的代码后观察响应头内容。

  1. 从最简单的修改开始,直接将响应头中加入Access-Control-Allow-Origin=“http://127.0.0.1:8009” 字段,理论上来说此时会允许所有的跨域请求。

服务端代码修改后内容

app.get('/', (req, res) => {
    console.log('get请求收到了!!!');
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009');
    res.send('get请求已经被处理');
})

响应头内容

理论与实践相结合彻底理解CORS

 

观察到响应头中多了一行内容:
Access-Control-Allow-Origin:http://127.0.0.1:8009 字段,再看看响应内容,确实有消息返回了,内容如下:

理论与实践相结合彻底理解CORS

 

  1. 只验证了Origin和Access-Control-Allow-Origin中内容响应,若内容不同又会有什么现象呢?

服务端代码进一步修改

app.get('/', (req, res) => {
    console.log('get请求收到了!!!');
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8008');
    res.send('get请求已经被处理');
})

响应头内容

理论与实践相结合彻底理解CORS

 

此时浏览器控制台报错了,出现了跨域问题

理论与实践相结合彻底理解CORS

 

通过该实验可以验证通过配置
Access-Control-Allow-Origin字段可以解决跨域问题;此外,浏览器是通过检查响应头中Access-Control-Allow-Origin字段的值与Origin的值是否相等来确定是否允许跨域访问的。通过该实验达到了我们实验的目的。

2.3 实验三

实验目的 验证CORS请求默认不发送Cookie信息,如果要把Cookie发送到服务器,一方面要服务器同意(通过指定
Access-Control-Allow-Origin字段且Access-Control-Allow-Origin需要指定具体域名);另一方面浏览器请求中必须带上withCredentials字段。

  1. 通过观察请求头(看实验一中请求头),并不包含Cookie信息
  2. 代码修改

index.html页面进行修改

axios('http://127.0.0.1:8010', {
    method: 'get',
    withCredentials: true
}).then(console.log)

服务器端代码修改

app.get('/', (req, res) => {
    console.log('get请求收到了!!!');
    console.log('cookie 内容为', req.headers.cookie);
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.cookie('test', 'test', {expires: new Date(Date.now() + 900000)});
    res.send('get请求已经被处理');
})
  1. 再次观察请求头内容,带上了cookie
理论与实践相结合彻底理解CORS

 

  1. 看看服务器端有没有接收到cookie信息,控制台信息如下,确实收到了cookie信息
理论与实践相结合彻底理解CORS

 

按照上述进行配置发送请求过程中将会带着cookie信息,上一个配置将会报错(可以自行验证)

2.4 实验四

实验目的

验证非简单请求会增加一次预检请求

预检请求是Options请求

请求头中会携带非简单请求的请求方法(
Access-Control-Request-Methods)和头信息(Access-Control-Request-Headers),预检请求的响应头信息中Access-Control-Allow-Methods和Access-Control-Allow-Headers与上述请求头中的信息匹配才可以发送正常的CORS请求。

  1. 第一步肯定是要修改代码了

index.html代码

axios('http://127.0.0.1:8010', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
        name: 'dog'
    }
}).then(console.log)

服务器代码修改如下

app.options('/', (req, res) => {
    console.log('options请求收到了!!!');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.setHeader('Access-Control-Max-Age', 10000);
    res.send('options请求已经被处理');
});

app.post('/', (req, res) => {
    console.log('post请求收到了!!!');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send('post请求已经被处理');
});
  1. 修改完了代码是不是要瞅瞅结果呢?

先看看浏览器是不是输出了内容,确实有内容输出了

理论与实践相结合彻底理解CORS

 

再瞅瞅服务器输出了些什么内容

理论与实践相结合彻底理解CORS

 

可以看到本来打算发一次请求,但实际上发了两条,第一条是Options请求,第二条请求才是post请求,上述打印内容验证了实验目的中的一和二。

  1. 下面继续深入思考,来看看预检请求的请求头和响应头

请求头内容

理论与实践相结合彻底理解CORS

 

响应头内容

理论与实践相结合彻底理解CORS

 

上述
Access-Control-Request-Headers与Access-Control-Allow-Headers一样,而且内容也正常返回了(步骤二中已经进行了展示),但是这不足以证明实验目的三,下面我们认为增加一条头信息再来看结果。

  1. 人为增加一条请求头信息

index.html页面修改后如下

axios('http://127.0.0.1:8010', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json',
        'Test': 'test'
    },
    data: {
        name: 'dog'
    }
}).then(console.log)

此时浏览器控制台报错了

理论与实践相结合彻底理解CORS

 

服务端只接收到了options请求

理论与实践相结合彻底理解CORS

 

请求头信息为

理论与实践相结合彻底理解CORS

 

响应头信息为

理论与实践相结合彻底理解CORS

 

通过该实验证明只有
Access-Control-Request-Headers与Access-Control-Allow-Headers相等的时候,预检请求才会通过,后续请求才会发出,从而达到了该实验的实验目的三。



Tags:CORS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
相信每一个前端在对接 API 时,多多少少一定遇过以下错误: 虽然要解决此问题大部分还是需要后端帮忙,但前端也需要知道为什么会发生、要如何解决。同源政策 (Same Origin Policy...【详细内容】
2021-12-24  Tags: CORS  点击:(6)  评论:(0)  加入收藏
跨域问题一直是面试中的经典问题,不管是前端老鸟还是新鸟都碰到过。其中针对跨源Ajax请求中有一个终极解决办法&mdash;&mdash;CORS(跨源资源共享)大家肯定也不陌生,一说这个名词...【详细内容】
2021-03-24  Tags: CORS  点击:(333)  评论:(0)  加入收藏
这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参...【详细内容】
2020-12-28  Tags: CORS  点击:(165)  评论:(0)  加入收藏
声明由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,雷神众测以及文章作者不为此承担任何责任。雷神众测拥有对此文章的修改和解释...【详细内容】
2020-08-31  Tags: CORS  点击:(223)  评论:(0)  加入收藏
跨域的含义同源策略以及其限制内容同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓 同源是指"协议+域名+...【详细内容】
2020-08-10  Tags: CORS  点击:(61)  评论:(0)  加入收藏
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-originresource sharing)。 出于安全原因,浏览器限制从脚本中发起的跨域HTTP请求。默认的安全限制为同源策略,即JavaScript或Cook...【详细内容】
2020-07-03  Tags: CORS  点击:(62)  评论:(0)  加入收藏
那么我们今天就来了解一下cors跨域和jsonp劫持漏洞同源策略为什么还要讲一遍同源策略,我们之前写xss的时候有讲到过,不了解的同学可以看看我们的那篇xss文章,那么该策略是浏览...【详细内容】
2020-02-16  Tags: CORS  点击:(421)  评论:(0)  加入收藏
这篇文章我们聊一聊CORS跨域,它的全称是"跨域资源共享"(Cross-origin resource sharing)。在之前的文章中我们已经详细介绍了如何使用JSONP进行接口跨域请求,如果不了解的可以参...【详细内容】
2020-01-16  Tags: CORS  点击:(78)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条