【前端学习——网络相关】浏览器同源策略和跨域

浏览器的同源策略

为什么要有?

帮助阻隔恶意文档,减少可能被攻击的媒介。(就是为了安全

如果非同源,共有三种行为受到限制

(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

  • JSONP
    网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
  • WebSocket
    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

字段Origin,表示该请求的请求源(origin),即发自哪个域名。服务器可以根据这个字段,判断是否许可本次通信.

  • CORS【待学习】
    CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
    – 简单请求
    在这里插入图片描述

– 非简单请求
凡是不同时满足上面两个条件,就属于非简单请求。

对于简单请求

浏览器自动在头信息之中,增加一个Origin字段。Origin说明本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

  • 如果不在许可范围内:服务器会返回一个正常的HTTP回应。但浏览器会发现这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。
    (就是请求的资源会返回,但是浏览器发现不被许可,就要拦截,这也是一种错误,但不是网络请求的错误)
  • 在许可范围内:服务器返回的响应,会多出几个头信息字段。
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

对于非简单请求

比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。
会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

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

跨域资源共享 CORS 详解 https://www.ruanyifeng.com/blog/2016/04/cors.html
浏览器同源政策及其规避方法 https://ruanyifeng.com/blog/2016/04/same-origin-policy.html

跨域

url是由:协议、域名、端口 三部分组成,三个都相同的才能互相访问

请求的url任意一个部分和当前不同都叫产生了跨域请求,违反了浏览器同源策略,满足同源限制。但是请求的话浏览器是会放行的,也就是你请求的服务器会收到你的请求。

同源限制是指:服务器响应了你的请求,但是浏览器进行了拦截(也就是服务器其实是把你要的东西传回去了,但浏览器不给你)。

配置跨域

如果要避免同源策略进行跨域请求,我们可以通过代理服务器的方式进行请求

先请求同源服务器,然后在我们的服务器请求其他域,然后被请求的服务器返回给我们服务器内容(服务器之间不存在跨域),然后我们的服务器把响应结果给浏览器。
浏览器发现结果来自于同源,就不进行拦截了。

相当于进行了代请求并转发。

https://www.bilibili.com/video/BV1GN4y1M7P5?p=34&vd_source=5cef5968d539682b683e7d01b00ad01b

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/594060.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

央视影音 视频下载 2

浏览器猫抓插件&#xff0c;拿到视频地址&#xff0c;这个地址的播放不正常&#xff0c;花屏。https://dh5.cntv.qcloudcdn.com/asp/h5e/hls/2000/0303000a/3/default/6edd15a0ebb3467993bec51a95be0e22/2000.m3u8 改一下地址&#xff0c;把代码中的h5e去掉。网址改为https://…

解决MySQL进行group by 字段返回大量异常结果

目录 问题 原因 解决方案 问题 看这条sql CH2O这个字段的取值只有1&#xff0c;2&#xff0c;3&#xff0c;正常进行group by 分类累加统计返回结果应该是这样&#xff1a; [{"CH2O": 2.0,"insufficient_weight": 142,"Normal_Weight": 164…

锁相环原理解析

在计算机和嵌入式系统中&#xff0c;常常要用锁相环来倍频&#xff0c;那么&#xff0c;锁相环是如何倍频的&#xff0c;其原理又是什么呢&#xff1f; 目录 1. 锁相环基本概念与构成1.1 鉴相器1.2 低通滤波器1.3 压控振荡器 2. 锁相环如何实现倍频3. 锁相环也会失效&#xff…

基于springboot+vue+Mysql的租房网站

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

[C++核心编程-01]----C++内存四区详细解析

前言 当程序运行时&#xff0c;操作系统会为程序分配一块内存空间&#xff0c;这块内存空间被划分为不同的区域&#xff0c;每个区域有其独特的作用和管理方式。四个区域分别为&#xff1a;堆、栈、全局/静态存储区和常量存储区。每个区域都有不同的作用和特点&#xf…

夏目友人帐所有妖怪名单

夏目友人帐妖怪名单 夏目友人帐 第一季 2008.07.07第1话&#xff1a;猫和友人帐 / 猫と友人帐 菱垣 狞影 斑第2话&#xff1a;露神之祠 / 露神の祠 露神 濯第3话&#xff1a;八原的怪人 / 八ツ原の怪人 一只目 牛头&#xff08;中级妖怪&#xff09;第4话&#xff1a;时雨与少女…

PHP源码_众筹商城

众筹商城源码 众筹商品平台 商城加共识元富之路 网上商城众筹 前端是编译后的&#xff0c;后端PHP&#xff0c;带商城 运行截图 源码贡献 https://githubs.xyz/boot?app39 部分数据库表 CREATE TABLE ti_shopro_store (id int(11) NOT NULL AUTO_INCREMENT COMMENT ID,nam…

英语复习之英语形近词总结(二)

接着总结形近词 单词释义例句 impress 英 /ɪmˈpres/ 美 /ɪmˈpres/ vt.盖印&#xff1b;强征&#xff1b;传送&#xff1b;给予某人深刻印象 vi.给人印象。印象&#xff0c;印记&#xff1b;特征&#xff0c;痕迹 1.It didnt impress me as a good place to live. 那地方…

基于openEuler22.03 LTS环境的docker容器基础

一、说明 本文配置环境为VMware虚拟机或华为云服务器&#xff08;4核CPU&#xff0c;8 GB内存&#xff0c;40GB磁盘&#xff09;&#xff0c;OS为openEuler 22.03 LTS &#xff0c;Linux服务器要求能联网。 二、安装docker 2.1 安装docker软件包 [rootnode01 ~]# dnf -y in…

电机控制系列模块解析(15)—— 母线小电容

一、薄膜电容 在家电产品和工业变频器中&#xff0c;使用容值更小但耐压更高的薄膜电容来代替传统的电解电容作为逆变器母线电容&#xff0c;这种技术趋势已经得到了广泛应用和产品化。以下是关于这一替换技术的一些关键考量和优势&#xff1a; 长期稳定性与可靠性&#xff1a…

3-qt综合实例-贪吃蛇的游戏程序

引言&#xff1a; 如题&#xff0c;本次实践课程主要讲解贪吃蛇游戏程序。 qt贪吃蛇项目内容&#xff1a; 一、功能需求 二、界面设计 各组件使用&#xff1a; 对象名 类 说明 Widget QWidge 主窗体 btnRank QPushButton 排行榜-按钮 groupBox QGroupBox 难…

牛客NC383 主持人调度(一)【简单 排序 Java/Go/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/e160b104354649b69600803184094adb 思路 直接看代码&#xff0c;不难Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返…

CMakeLists.txt语法规则:控制编译的变量

一. 简介 前面一篇文章学习了 CMakeLists.txt语法中的 部分常量变量&#xff0c;具体学习提供信息的变量。 本文继续学习 CMakeLists.txt语法中&#xff1a;控制编译的变量。 二. CMakeLists.txt语法规则&#xff1a;控制编译的变量 这些变量可以控制编译过程&#xff0c;…

[C语言]指针进阶详解

指针是C语言的精髓所以内容可能会比较多&#xff0c;需要我们认真学习 目录 1、字符指针 2、指针数组 3、数组指针 3.1数组指针的定义 3.2&数组名vs数组名 3.3数组指针的使用 4、数组传参和指针传参 4.1一维数组传参 4.2二维数组传参 4.3一级指针传参 4.4二级指…

【Docker学习】docker run的端口映射-p和-P选项

docker run的端口映射选项分为-p&#xff08;小写&#xff0c;全称--publish&#xff09;&#xff0c;-P&#xff08;大写&#xff0c;全称--publish-all&#xff09;&#xff0c;之前认为只有改变容器发布给宿主机的默认端口号才会进行-p的设置&#xff0c;而不改变默认端口号…

现代信号处理8_递归的最小二乘(CSDN_20240505)

递归的最小二乘大约出现在50年前。递归&#xff0c;就是在已经算出的结果的基础下&#xff0c;当新的数据到来时&#xff0c;不需要再对数据进行一次完整的运算&#xff0c;而是在已有结果的基础上做一些简单的调整&#xff0c;就能得到新的结果。使用递归的好处&#xff1a; …

面试中算法(使用栈实现队列)

使用栈来模拟一个队列&#xff0c;要求实现队列的两个基本操作:入队、出队。 栈的特点&#xff1a;先入后出&#xff0c;出入元素都是在同一端&#xff08;栈顶&#xff09;。 队列的特点&#xff1a;先入先出&#xff0c;出入元素是在两端&#xff08;队头和队尾)。 分析&…

ICode国际青少年编程竞赛- Python-1级训练场-for循环与变量

ICode国际青少年编程竞赛- Python-1级训练场-for循环与变量 1、 a 1 for i in range(4):Spaceship.step(a)Dev.step(2)Dev.step(-2)a a 12、 a 1 for i in range(4):Spaceship.step(a)Dev.step(3)Dev.step(-3)a a 13、 a 1 for i in range(4):Dev.turnLeft()Dev.step(…

【机器学习】Ctrl-Adapter:视频生成领域的革新者

Ctrl-Adapter&#xff1a;视频生成领域的革新者 一、ControlNets的挑战与Ctrl-Adapter的应运而生二、Ctrl-Adapter的技术原理与实现三、Ctrl-Adapter的应用实例与性能表现四、Ctrl-Adapter的意义与未来展望 随着人工智能技术的飞速发展&#xff0c;图像与视频生成领域正经历着前…

【电源专题】拿人体的循环系统与板级电源做个比较

一般人可能会觉得电源大概是电子设备里面比较容易搞定的门类。因为,只要线路没有接错,指示灯(如果有)能亮,电源都能工作。从这个方面说,好像是很容易。但是通过多年的经验和经历的坑,发现电源其实是一个很麻烦的东西,稍微有一点不完美就会有大问题出现。 如果将人体也当…