当前位置: 首页 > news >正文

浏览器多管闲事之跨域

年少时的梦想就是买一台小霸王游戏机
当时的宣传语就是小霸王其乐无穷~。
大些了,攒够了零花钱,在家长的带领下终于买到了
那一刻我感觉就是最幸福的人
风都是甜的!

哪成想...
刚到家就被家长扣下了
“”禁止未成年人玩游戏机
(问过卖家了,卖家给的结论)...,
合着买是能买,玩是不能玩的!
不让我玩啊,我这个气呀...

图片

蹩扯了~
生活中的事跟跨域有什么关系,那必须有。
跨域的产生是浏览器的安全机制引起的,只有在使用Ajax时才会发生。简单来说就是你可以通过ajax发送请求,但要看远程服务器脸色,他没授权,浏览器这个老六就给拦截了,不能用这个结果,像极了游戏机让买不让玩。

什么是跨域

跨域(Cross-Origin)指的是在 Web 开发中,一个网页的运行环境(域)与所请求资源的域不一致,即请求的目标资源与当前网页的域名(协议、域名或端口)不同。

Web 浏览器遵循同源策略(Same-Origin Policy),这是一种安全策略,旨在防止潜在的恶意网站窃取用户数据或进行其他安全攻击。同源策略要求网页的运行环境和所请求的资源必须拥有相同的协议、域名和端口,否则浏览器会阻止跨域请求的执行。

举例来说,每个网站都有一个域名或者IP地址(实际上域名就是对IP地址的别名,方便人们记忆)。当我们访问一个网站时,浏览器会将某个页面下载到本地并解析,以展示图形页面。为了支持更多的业务需求,在这个页面中可能会发起一些额外的请求。为了避免页面卡顿,我们使用了Ajax技术偷偷地通过后门请求数据。偷偷走后门是可行的,但是必须遵循规则,不可以随意发起请求。

假设当前页面是www.qfedu.com,在这个页面中发送了一个Ajax请求。浏览器允许请求发送出去,但是请求的地址不是本身的地址,而是www.1000phone.com/api/xxxx这样的地址。此时,浏览器会检查响应,并查看服务端是否允许任何来源发起请求。如果服务端允许,浏览器将放行请求。否则,浏览器会报错,这种错误就是跨域问题。

来吧,看图

 

图片

绿色都是可以通行的,红色是跨域概念的关键点

如何处理跨域

常用的解决跨域方案有3种,分别是jsonp、cors、proxy

    ● JSONP(JSON with Padding):核心思想是浏览器只限制ajax,不限制图片、多媒体、css、js等资源访问其他网站,恰好利用这个特性,使用一些技巧来解决跨域。

JSONP 是一种利用<script>标签进行跨域请求的技术。通过在页面中动态创建<script>标签,请求远程服务器资源,并在服务器响应中返回一个包裹在函数调用中的 JSON 数据,从而绕过同源策略的限制。JSONP 适用于在受控的环境中,服务器端需要配合返回 JSONP 格式的数据。

有局限性,需要回调函数 +别人服务端配合

    ● CORS(跨域资源共享):核心思想就是让服务器不对任何访问者做限制,在响应头中添加一些语句,浏览器就放行了,就像游戏机卖家跟家长说多大都可以玩,家长也就不会没收了。

    CORS 是一种标准的跨域解决方案,由服务器端进行配置。服务器通过设置响应头来指示允许特定域的请求访问资源,浏览器在接收到响应头后判断是否允许跨域请求。CORS 支持简单请求和预检请求,是一种较为安全和灵活的跨域解决方案。

node.js类型的服务器代码设置如下:

 


// // 允许哪些域名请求我
//设置所有页面都可以访问这个服务
resp.setHeader('Access-Control-Allow-Origin', '*')
//只允许设定的几个网站访问
resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777')
//允许设定多个网站访问
resp.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:7777,http://127.0.0.1:5500')
// // 允许哪些请求方式
// resp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
// // 允许携带哪些额外的请求头信息
// resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With,X_Requested_With,Content-Type")

有局限性,需要服务端配合,别人服务端安全性降低

● 代理服务器(Proxy):核心思想是指挥家长玩游戏机。。。

代理服务器是一种通过后端服务器转发请求的方法。前端应用将跨域请求发送给同源服务器,然后同源服务器再向目标服务器发送请求,并将响应返回给前端。这样前端应用就绕过了跨域问题,因为请求是同源的。代理服务器是一种有效的跨域解决方案,特别适用于无法修改目标服务器响应头的情况。

这个是比较好的解决方案

总结

我们应该多劝劝浏览器,少管点闲事

相关文章:

浏览器多管闲事之跨域

年少时的梦想就是买一台小霸王游戏机 当时的宣传语就是小霸王其乐无穷~。 大些了&#xff0c;攒够了零花钱&#xff0c;在家长的带领下终于买到了 那一刻我感觉就是最幸福的人 风都是甜的&#xff01; 哪成想... 刚到家就被家长扣下了 “”禁止未成年人玩游戏机 (问过卖家了&a…...

那为什么 async 函数最终返回的是一个新的 Promise?

async 函数的设计就是这样的&#xff1a;无论你返回什么值&#xff0c;它都会自动被包装为一个 Promise 对象。这就是为什么说 async 函数最终返回的是一个新的 Promise 对象。 当你在 async 函数中使用 return 语句返回一个值时&#xff0c;这个值会成为最终返回的 Promise 对…...

Java的泛型

泛型 泛型又称参数化类型&#xff0c;是Jdk5.0出现的新特性,解决数据类型的安全性问题 在类声明或实例化时只要指定好需要的具体的类型即可 Java泛型可以保证如果程序在编译时没有发出警告&#xff0c;运行时就不会产生ClassCastException异常。同时&#xff0c;代码更加简洁…...

pve和openwrt以及我的电脑中网络的关系和互通组网

情况1 一台主机 有4个口&#xff0c;分别eth0,eth1,eth2,eth3 pve有管理口 这个情况下 &#xff0c;没有openwrt 直接电脑和pve管理口连在一起就能进pve管理界面 情况2 假设pve 的管理口味eth0 openwrt中桥接的是eth0 eth1 eth2 那么电脑连接eth3或者pve管理口设置eth3&#xf…...

TypeScript学习笔记

1.ts和js的区别 2. ts的优势 3. ts下载后报错解决方法 报错: PS C:\Users\\Desktop> tsc -v tsc : 无法加载文件 C:\Users\32173\AppData\Roaming\npm\tsc.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/ go.microsoft.com/fwlink/?…...

MATLAB实现两组数据的延时对齐效果

博主在某次实验中&#xff0c;相同的实验条件下分别采集了两组数据&#xff0c;发现两组数据存在一个延时&#xff0c;如下图所示&#xff1a; 本文记录消除这个延时&#xff0c;实现相同数据状态的对齐效果&#xff0c;采用MATLAB自带的xcorr函数实现&#xff0c;具体步骤如下…...

基于Spring Boot的网络在线学习网站的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的网络在线学习网站的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spri…...

Is a directory: ‘outs//.ipynb_checkpoints‘

提示out/文件夹的.ipynp_chechpoints是一个文件夹&#xff0c;但是打开文件夹却没有看到&#xff0c;可以得知他是一个隐藏文件夹&#xff0c;进入outs/文件夹&#xff0c;使用 ls -a可以看到所有文件 果然出现这个文件夹&#xff0c;但是我们这个outs/文件夹存放的是图片&am…...

PintOS lab2 User Programs 实验记录

Background 大体流程如下图所示&#xff0c;显然这时候start_process无法被调度到。 然后start_process 里面load .out文件 &#xff08;.o文件就是对象文件,是可重定向文件的一种,通常以ELF格式保存&#xff0c;里面包含了对各个函数的入口标记&#xff0c;描述&#xff0c;…...

『CV学习笔记』docker和nvidia-docker离线安装

docker和nvidia-docker离线安装 文章目录 1. docker的deb包下载链接2. nvidia-docker 的deb包下载3. 重启 docker4. 检验安装5. Docker容器命令行不支持Tab键命令自动补全6. 参考文献这里是ubuntu操作系统, 如果是其他的操作系统,则需要安装对应的deb包1. docker的deb包下载链…...

使用JavaScript实现页面滑动切换效果

使用JavaScript实现页面滑动切换效果 在现代Web页面设计中&#xff0c;页面滑动切换效果已经成为了一种常见的设计要求&#xff0c;能够提升用户体验&#xff0c;增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先&#xff0c;我们需要在HTML中添加一些基础结构和…...

react中的formik如何使用

介绍&#xff1a; Formik 是一个用于处理表单状态和验证的 React 库。它提供了一种简化和统一的方式来处理复杂的表单逻辑&#xff0c;包括表单值的管理、表单验证、表单提交和错误处理等。 使用 安装 Formik 和 Yup&#xff08;用于表单验证&#xff09;&#xff1a; // ba…...

MYSQL储存过程

一、概念及形式 存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令&#xff0c;通俗来讲存储过程其实就是能完成一定操作的一组SQL语句。 1、自定义语句结束符 DELIMITER $$ 2、创建 使用CREATE动作及PROCEDURE关键字进行过程创建&#xff0c;一般格式为&…...

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…...

篇七:桥接模式:连接抽象和实现

篇七&#xff1a;“桥接模式&#xff1a;连接抽象和实现” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff0c…...

STL容器适配器 -- stack和queue(使用+实现)(C++)

stack和queue stackstack的介绍stack的使用stack的实现 queuequeue的介绍queue的使用queue的实现 deque简单介绍deque&#xff08;双端队列&#xff09;双开口连续打引号的原因 deque底层结构deque的迭代器封装结构&#xff08;复杂&#xff09;deque的优缺点 栈和队列数据结构…...

K8s operator从0到1实战

Operator基础知识 Kubernetes Operator是一种用于管理和扩展Kubernetes应用程序的模式和工具。它们是一种自定义的Kubernetes控制器&#xff0c;可以根据特定的应用程序需求和业务逻辑扩展Kubernetes功能。 Kubernetes Operator基于Kubernetes的控制器模式&#xff0c;通过自…...

【LangChain学习】基于PDF文档构建问答知识库(三)实战整合 LangChain、OpenAI、FAISS等

接下来&#xff0c;我们开始在web框架上整合 LangChain、OpenAI、FAISS等。 一、PDF库 因为项目是基于PDF文档的&#xff0c;所以需要一些操作PDF的库&#xff0c;我们这边使用的是PyPDF2 from PyPDF2 import PdfReader# 获取pdf文件内容 def get_pdf_text(pdf):text "…...

阿里云国际站对象储存OSS的常见问题?

1.什么是阿里云OSS&#xff1f; 阿里云对象存储服务OSS&#xff08;Object Storage Service&#xff09;&#xff0c;是阿里云提供的海量、安全、低成本、高持久性的云存储服务&#xff0c;并可无限扩展。其数据设计持久性不低于99.9999999999%&#xff08;12个9&#xff09;&a…...

spss什么是描述性分析,以及如何去处理。

描述性分析是数据分析的第一步&#xff0c;是了解和认识数据基本特征和结构的方法&#xff0c;只有在完成了描述性统计分析&#xff0c;充分的了解和认识数据特征后&#xff0c;才能更好地开展后续更复杂的数据分析。因此&#xff0c;描述性分析是开展数据分析过程中最基础且必…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...