前端网络之【浏览器跨域问题分析与解决方案】

在这里插入图片描述

文章目录
  • 同源策略
  • 同源与异源
  • 跨域的限制场景
  • 解决方案
    • CORS
      • 请求分类
        • 简单请求
        • 预检请求
      • 注意点一 【关于Cookie】
      • 注意点二 【关于跨域获取响应头】
    • JSONP
      • 基本流程
    • 代理服务器
  • 如何选择对应方案

同源策略

**同源策略是一套浏览器的安全策略机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。简单来说，同源策略就是对同源资源的访问请求放行，对异源资源的访问请求限制，因此限制造成的开发问题，称之为跨域（异源）问题。

点击查看W3C官方文档对同源策略的解释描述**

同源与异源

在这里插入图片描述

两个URL地址的源地址如果完全相同，则称之为同源，否则称之为异源（跨域）

源一

源二

是否同源

http : //www.xyz.com/home

https : //www.xyz.com/home

非同源

http : //www.xyz.com/home

http : //mail.xyz.com/home

非同源

http : //www.xyz.com:8080/home

http : //www.xyz.com:8081/home

非同源

http : //www.xyz.com:8080/home

http : //www.xyz.com:8080/info

同源

在这里插入图片描述

跨域的限制场景

  • 限制 DOM 访问
  • 限制 Cookie 访问（默认情况下）
  • 限制 Ajax 获取资源数据

请求页面的源称之为 页面源，在该页面中发出的请求称之为 目标源。

当页面源和目标源一致时，则为 同源请求，否则为 异源请求（跨域请求）

注明：

  • 跨域限制仅存在浏览器端，服务端不存在跨域限制。
  • 即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者。
  • <link>、<script/>、<img> … 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响
  • 对 AJAX 发出的跨域请求严厉限制

在这里插入图片描述

解决方案

CORS

CORS（Cross-Origin Resource Sharing（跨域资源共享））: 。是最正统的跨域解决方案，同时也是浏览器推荐的解决方案。CORS是一套规则，用于帮助浏览器判断是否校验通过。

CORS的基本理念是：

  • 只要服务器明确表示 允许请求，则 通过校验
  • 服务器明确拒绝或没有表示，则校验不通过

所以，使用CORS解决跨域，必须要保证服务器是我方可完全控制的

请求分类
  • CORS 将请求类型分为两类：简单请求和预检请求
  • 对不同种类的请求它的规则有所区别。
  • 所以要理解CORS，首先要理解它是如何划分请求的。

简单请求

复杂请求（预检请求（preflight））

请求方法是:GET，POST，HEAD之一

头部字段满足CORS安全规范，详见W3C安全规范文档说明
浏览器默认自带的头部字段都是满足安全规范的，只要开发者不改动和新增头部，就不会打破此条规则

如果有请求头 Content-Type，必须是下列值中的一个

text/plain

multipart/form-data

application/x-www-form-urlencoded

点击查看简单请求完整判断逻辑

只要不是简单请求，其它均为复杂（预检）请求

简单请求

对于简单请求的验证流程

在这里插入图片描述

预检请求
  1. 发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的
  2. 主要作用：用于向服务器确认是否允许接下来的跨域请求
  3. 基本流程：先发起 OPTIONS 请求，如果通过预检，则继续发起实际的跨域请求
  4. 请求头内容：一个 OPTIONS 预检请求，通常会包含如下请求头

请求头

描述

Origin

发起请求的源

Access-Control-Request-Method

实际请求的 HTTP 方法

Access-Control-Request-Headers

实际请求中使用的自定义头（如果有的话）

服务器先通过浏览器的预检请求，服务器需要返回如下响应头：

请求头

描述

Access-Control-Allow-Origin

允许的源

Access-Control-Allow-Methods

允许的的 HTTP 方法

Access-Control-Allow-Headers

实际请求中允许的自定义头

Access-Control-Max-Age

预检请求的结果缓存时间（可选）

对预检请求的验证流程

1. 发送预检请求
在这里插入图片描述
2. 开始发送真实请求（和简单请求一致）

注意点一 【关于Cookie】

默认情况下，AJAX的跨域请求并不会附带Cookie，这样一来，某些需要权限的操作就无法进行。不过可以通过简单的配置就可以实现附带Cookie

// XHR
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;// fetch api
fetch(url, {credentials: "include"
})

这样一来，该跨域的AJAX请求就是一个_附带身份凭证的请求_
当一个请求需要附带Cookie时，无论它是简单请求，还是预检请求，都会在请求头中添加Cookie字段
而服务器响应时，需要 明确告知客户端：服务器允许这样的凭据
告知的方式也非常的简单，只需要在响应头中添加：Access-Control-Allow-Credentials: true 即可。
对于一个附带身份凭证的请求，若服务器没有明确告知，浏览器仍然视为跨域被拒绝。
另外要特别注意的是：对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为*。这就是为什么不推荐使用*的原因

注意点二 【关于跨域获取响应头】

在跨域访问时，JS只能拿到一些最基本的响应头，如：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

Access-Control-Expose-Headers头让服务器把允许浏览器访问的头放入白名单，例如：

Access-Control-Expose-Headers: authorization, a, b

配置指定过后，这样JS就能够访问指定的响应头了。

JSONP

JSONP 是利用了 <script> 标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 的时，可以靠 JSONP 解决跨域

基本流程
  • 第一步：客户端创建一个<script>标签，并将其 src 属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据
  • 服务端接收到请求后，将数据封装在回调函数中并返回
  • 客户端的回调函数被调用，数据以参数的形势传入回调函数

在这里插入图片描述
虽然可以解决问题，但JSONP有着明显的缺陷：

  • 仅能使用GET请求
  • 容易产生安全隐患
    • 恶意攻击者可能利用callback=恶意函数的方式实现XSS攻击
  • 容易被非法站点恶意调用

因此，除非是某些特殊的原因，否则永远不应该使用JSONP

代理服务器

由于同源策略只会在浏览器环境中存在，一但脱离了浏览器，则跨域不存在。所以我们可以借助于中间层代理服务器来进行请求和响应的转发

在这里插入图片描述

如何选择对应方案

基本原则：是要保持生产环境和开发环境一致。

在这里插入图片描述

常见几种场景：

在这里插入图片描述

在这里插入图片描述

这几种场景，始终围绕保持和生产环境和开发环境一致的基本理念。

在这里插入图片描述

??♂ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
??博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
??♂ 如果都看到这了，博主希望留下你的足迹！【??收藏！??点赞！评论！】
——————————————————————————————

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SSE 流式场景应用 及 方案总结

SSE 流式场景应用 及 方案总结

文章目录 SSE 流式场景前端流式解码应用JavaScript中的EventSource APISSE 与 Axios应用SSE 与 fetch 应用fetch 自己的流式响应代码解释 SSE 流式场景 股票行情实时推送 背景&#xff1a;在金融领域&#xff0c;股票价格是实时变化的。投资者和交易员需要及时获取最新的股票行…
阅读更多...
老旧小区用电安全保护装置#限流式防火保护器参数介绍#

老旧小区用电安全保护装置#限流式防火保护器参数介绍#

摘要 随着居民住宅区用电负荷的增加&#xff0c;用电安全问题日益突出&#xff0c;火灾隐患频繁发生。防火限流式保护器作为一种新型电气安全设备&#xff0c;能够有效预防因电气故障引发的火灾事故。本文介绍了防火限流式保护器的工作原理、技术特点及其在居民住宅区用电系统…
阅读更多...
【ES6复习笔记】集合Set（13）

【ES6复习笔记】集合Set（13）

ES6 提供了新的数据结构 Set&#xff08;集合&#xff09;。它类似于数组&#xff0c;但成员的值都是唯一的&#xff0c;集合实现了iterator接口&#xff0c;所以可以使用『扩展运算符』和『for…of…』进行遍历。 集合的属性和方法 size&#xff1a;返回集合的元素个数。add…
阅读更多...
whisper.cpp: PC端测试 -- 电脑端部署音频大模型

whisper.cpp: PC端测试 -- 电脑端部署音频大模型

whisper.cpp: PC端测试 1.环境需要2.构建项目3.PC测试 1.环境需要 以下是经实验验证可行的环境参考&#xff0c;也可尝试其他版本。 &#xff08;1&#xff09;PC&#xff1a;Ubuntu 22.04.4 &#xff08;2&#xff09;软件环境&#xff1a;如下表所示 工具版本安装Anacond…
阅读更多...
NAT的工作原理

NAT的工作原理

NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;的工作原理主要是通过修改网络数据包中的IP地址信息来实现的。它允许内部网络使用私有IP地址&#xff0c;同时通过一个或少数几个公共IP地址来接入外部网络&#xff08;通常是Internet&#xf…
阅读更多...
安全筑堤，效率破浪 | 统一运维管理平台下的免密登录应用解析

安全筑堤，效率破浪 | 统一运维管理平台下的免密登录应用解析

在信息技术迅猛发展的今天&#xff0c;企业运维管理领域正面临着前所未有的复杂挑战。统一运维管理平台作为集中管理和监控IT基础设施的核心工具&#xff0c;其安全性和效率至关重要。免密登录作为一种新兴的身份验证技术&#xff0c;正逐渐成为提升运维管理效率和安全性的重要…
阅读更多...
论文复刻：ESG表现对企业价值的影响机制研究——A股上市公司证据（2009-2023年）

论文复刻：ESG表现对企业价值的影响机制研究——A股上市公司证据（2009-2023年）

参照王波&#xff08;2022&#xff09;的做法&#xff0c;对来自软科学《ESG表现对企业价值的影响机制研究——来自我国A股上市公司的经验证据》一文中的基准回归部分进行复刻 以中国2009-2023年A股上市公司为研究样本考察企业的环境、社会和治理&#xff08;ESG&#xff09;表…
阅读更多...
小程序租赁系统开发指南与实现策略

小程序租赁系统开发指南与实现策略

内容概要 在如今这个快节奏的时代&#xff0c;小程序租赁系统的开发正逐渐成为许多商家提升服务质量与效率的重要选择。在设计这样一个系统时&#xff0c;首先要明白它的核心目标&#xff1a;便捷、安全。用户希望在最短的时间内找到需要的物品&#xff0c;而商家则希望通过这…
阅读更多...
[2003].第2-01节：关系型数据库表及SQL简介

[2003].第2-01节：关系型数据库表及SQL简介

所有博客大纲 后端学习大纲 MySQL学习大纲 1.数据库表介绍&#xff1a; 1.1.表、记录、字段 1.E-R&#xff08;entity-relationship&#xff0c;实体-联系&#xff09;模型中有三个主要概念是&#xff1a; 实体集 、 属性 、 联系集2.一个实体集&#xff08;class&#xff09…
阅读更多...
微调大模型时，如何进行数据预处理? 将＜input, output＞转换为模型所需的＜input_ids, labels, attention_mask＞

微调大模型时，如何进行数据预处理? 将＜input, output＞转换为模型所需的＜input_ids, labels, attention_mask＞

原始训练数据集格式如下&#xff1a; <input, output> 形式&#xff1a;字符 模型训练所需数据格式如下&#xff1a; # tokenizer处理后 return {"input_ids": example,"labels": labels,"attention_mask": example_mask, } 将字符转…
阅读更多...
基于websocket实现本地web语音聊天

基于websocket实现本地web语音聊天

基于libwebsockets库实现语音聊天 1、关于libwebsocket库自行编译2、client使用htmljs 代码3、服务端代码 1、关于libwebsocket库自行编译 2、client使用htmljs 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…
阅读更多...
git推送本地仓库到远程(Gitee)

git推送本地仓库到远程(Gitee)

目录 一、注册创建库 二、创建仓库 三、推送本地仓库到远程 1.修改本地仓库用户名和邮箱 2.本地库关联远程仓库 3.拉取远程仓库的文件 4.推送本地库的文件 5.查看远程仓库 四、远程分支查看 1.查看远程分支 2.修改test.txt文件 一、注册创建库 Gitee官网&#xff1…
阅读更多...
GoZero框架接入数据库引擎Gorm 并实战：构建简单的 CRUD 业务API

GoZero框架接入数据库引擎Gorm 并实战：构建简单的 CRUD 业务API

GoZero 是一个高性能的微服务框架&#xff0c;它基于 Go 语言开发&#xff0c;提供了丰富的工具支持&#xff0c;能够帮助开发者快速构建可扩展、易维护的应用。Gorm 是 Go 语言中常用的 ORM 库&#xff0c;它帮助我们简化数据库操作&#xff0c;使用面向对象的方式进行增删改查…
阅读更多...
KNN分类算法 HNUST【数据分析技术】(2025)

KNN分类算法 HNUST【数据分析技术】(2025)

1.理论知识 KNN&#xff08;K-Nearest Neighbor&#xff09;算法是机器学习算法中最基础、最简单的算法之一。它既能用于分类&#xff0c;也能用于回归。KNN通过测量不同特征值之间的距离来进行分类。 KNN算法的思想&#xff1a; 对于任意n维输入向量&#xff0c;分别对应于特征…
阅读更多...
达梦数据守护搭建

达梦数据守护搭建

主备库初始化 ./dminit path/dmdata/data db_nameDM01 instance_nameDMSVR01 port_num5236 page_size16 extent_size32 log_size500 case_sensitive1 SYSDBA_PWDDM01SYSDBA ./dminit path/dmdata/data db_nameDM02 instance_nameDMSVR02 port_num5236 page_size16 extent_size3…
阅读更多...
探索Flink动态CEP：杭州银行的实战案例

探索Flink动态CEP：杭州银行的实战案例

摘要&#xff1a;本文撰写自杭州银行大数据工程师唐占峰、欧阳武林老师。将介绍 Flink 动态 CEP的定义与核心概念、应用场景、并深入探讨其技术实现并介绍使用方式。主要分为以下几个内容&#xff1a; Flink动态CEP简介 Flink动态CEP的应用场景 Flink动态CEP的技术实现 Flin…
阅读更多...
谷歌集群数据集:负载均衡云服务测试数据

谷歌集群数据集:负载均衡云服务测试数据

谷歌集群数据集 以下为你举例说明各文件中一条数据的具体含义，方便你更好地理解这个数据集： 1. machine_events 文件示例 假设其中有这样一条数据：123456789, 101, 0, "platform_abc", 4, 8 含义：表示在时间戳为123456789微秒时，机器ID为101的这台机器发生了…
阅读更多...
打造高效租赁小程序让交易更便捷

打造高效租赁小程序让交易更便捷

内容概要 在如今节奏飞快的商业世界里&#xff0c;租赁小程序如同一只聪明的小狐狸&#xff0c;迅速突围而出&#xff0c;成为商家与消费者之间的桥梁。它不仅简化了交易流程&#xff0c;还在某种程度上将传统租赁模式带入了互联网时代。越来越多的企业意识到&#xff0c;这种…
阅读更多...
/proc /dev /sys 目录的用途

/proc /dev /sys 目录的用途

author: hjjdebug date: 2024年 12月 25日 星期三 16:32:44 CST description: /proc /dev /sys 目录的用途 文章目录 甲: /proc目录:对module 的管理:$cat /proc/devices 乙: /dev 目录创建设备节点命令 mknod 丙: /sys 目录1. /sys/dev2. /sys/devices3. /sys/module4. /sys/c…
阅读更多...
来道面试题——CopyOnWriteArrayList

来道面试题——CopyOnWriteArrayList

原理 初始化时候&#xff0c;CopyOnWriteArrayList内部维护了一个可变数组&#xff0c;用于存储元素当执行数据变更操作的时候&#xff0c;会先创建一个原数组的副本&#xff0c;在副本上进行写操作&#xff0c;修改副本中的元素。写操作完成之后&#xff0c;把原数组的引用指…
阅读更多...
最新文章

Copyright @ 2022~2023