浏览器多管闲事之跨域

news2024/11/16 18:04:44

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

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

图片

蹩扯了~
生活中的事跟跨域有什么关系,那必须有。
跨域的产生是浏览器的安全机制引起的,只有在使用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):核心思想是指挥家长玩游戏机。。。

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

这个是比较好的解决方案

总结

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AWS中Lambda集成SNS

1.创建Lambda 在Lambda中&#xff0c;创建名为AWSSNSDemo的函数 use strict console.log(loading function); var aws require(aws-sdk); var docClient new aws.DynamoDB.DocumentClient(); aws.config.regionap-southeast-1;exports.handler function(event,context,cal…

C语言实现选择排序

什么是选择排序&#xff1f; 选择排序是一种简单直观的排序算法&#xff0c;它的核心思想是每次从未排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;然后将其放到已排序序列的末尾。通过重复这个过程&#xff0c;直到所有元素都排好序为止。 选择排序…

IntelliJ IDEA如何重新弹出git身份验证窗口

1、点击File菜单—>点击Settings—>点击Appearance & Behavior—>点击System Settings—>点击Passwords—>选中Do not save, forget passwords after restart—>点击Apply—>点击OK&#xff0c;如下所示&#xff1a; 2、重启IntelliJ IDEA—>通过g…

idea集成svn

一、注意 安装svn客户端的时候一定要勾选&#xff0c;否则在idea上集成svn的时候会找不到 svn.exe 而报错。 如果当初安装时忘记勾选&#xff0c;重新运行安装包&#xff0c;选择modify&#xff0c;勾选command line client tools项中的内容。 二、配置idea集成svn 三、检出(c…

生产车间SOP+电子作业指导书系统解决方案

为了提高生产效率&#xff0c;许多企业开始使用SOP电子作业指导书系统来统一管理和快速发布工作指导书。这种系统不仅能够实现无纸化办公&#xff0c;节省企业资源&#xff0c;还能集成生产管理看板系统和安灯呼叫系统&#xff0c;实现生产现场数据的目视化管理。 一、SOP系统拓…

简单数据类型

目录 前言 一.变量 1.1 变量命名 2.1 变量定义 二.类型 2.1 字符串 2.1.1 定义 2.1.2 操作 2.1.3 python2中的print语句 2.2 整数 2.2.1 运算 2.2.2 浮点数 2.2.3 str()函数 2.3 列表 2.3.1 访问和使用列表元素 2.3.2 在列表中添加元素 2.3.3 从列表中删除元素 2.3.4 组织列表…

LangChain源码逐行解密之LLMs(二)

LangChain源码逐行解密之LLMs(二) 18.3 base.py源码逐行剖析 现在我们要聚焦于源代码中的大语言模型部分。如图18-3所示,LangChain提供了许多语言模型的选择。 Gavin大咖微信:NLP_Matrix_Space 图18- 3 LangChain的llms目录 如图18-4所示,整个LangChain的模块化设计非常出…

最小花费 c++详解

最小花费 c详解 最小花费题目描述输入格式输出格式样例样例输入样例输出 提示 解法代码 最小花费 题目描述 在 n n n 个人中&#xff0c;某些人的银行账号之间可以互相转账。这些人之间转账的手续费各不相同。给定这些人之间转账时需要从转账金额里扣除百分之几的手续费&…

如何实现电子合同管理系统与其他企业应用的无缝对接?

电子合同管理系统是一种利用信息技术来管理和执行合同的系统。随着企业数字化转型的推进&#xff0c;电子合同管理系统已经成为许多企业必备的工具之一。然而&#xff0c;要实现电子合同管理系统与其他企业应用的无缝对接&#xff0c;并不是一件容易的事情。 实现电子合同管理…

深度解读|一站式ABI平台 Smartbi Insight V11 能力再升级

纵观过去&#xff0c;我们发现汽车和BI的发展有异曲同工之妙。 100来年&#xff0c;汽车的动力从蒸汽到燃油再到新能源&#xff0c;汽车的操控方式从手动到自动再到智能无人驾驶。而在BI领域&#xff0c;自1958年BI的概念提出后&#xff0c;底层数据准备从报表开发、Cube多维模…

图像的缩放之c++实现(qt + 不调包)

1.基本原理 图像的缩放一般使用插值算法&#xff0c;而本章将介绍两种常用插值算法&#xff1a;最临近插值法和双线性插值法 1.最临近插值法 将浮点数的位置坐标&#xff0c;进行四舍五入找到原图像的整型坐标即可&#xff0c;具体操作可见下面的公式&#xff0c;其中原图像坐标…

MES系统在机器人行业生产管理种的运用

机器人的智能水平也伴随技术的迭代不断攀升。 2021年的春晚舞台上&#xff0c;来自全球领先工业机器人企业abb的全球首款双臂协作机器人yumi&#xff0c;轻松自如地表演了一出写“福”字&#xff0c;赢得了全国观众的赞叹。 在汽车装配领域&#xff0c;一台机器人可以自主完成一…

【笔记】线段树

【笔记】线段树 目录 简介定义建树更新例题1: 单点修改&#xff0c;区间查询单点修改区间查询本题完整代码 例题2: 区间修改&#xff0c;单点查询思路本题完整代码 例题3: 区间修改&#xff0c;区间查询懒标记基本思想应用 区间修改本题完整代码 简介 线段树是一棵二叉树。如果…

带团队后的日常思考

一、日常问题 1&#xff09;补充产品文档 最近版本迭代&#xff0c;其中涉及一块举报流程的优化&#xff0c;其实会涉及管理后台发送站内信。 刚开始&#xff0c;大家都没怎么在意这个需求&#xff0c;但是在执行时才发现有许多细节没有考虑到。 管理后台的举报页面是在 2018 …

【C++技能树】一文看懂模板匹配

Halo&#xff0c;这里是Ppeua。平时主要更新C&#xff0c;数据结构算法&#xff0c;Linux与ROS…感兴趣就关注我bua&#xff01; 文章目录 0.泛型编程1.模板2 函数模板:2.1函数模板的特化 3. 类模板3.1 非类型模板参数3.2 类的模板刻画3.2.1 全特化3.2.2 偏特化 0.泛型编程 假…

在Microsoft SQL Server 2008中,语法生成错误“并行数据仓库(PDW)功能未启用“

案例&#xff1a; 原表有两列&#xff0c;分别为月份、月份销售额&#xff0c;而需要一条 SQL 语句实现统计出每个月份以及当前月以前月份销售额和 sql 测试数据准备&#xff1a; DECLARE Temp Table ( monthNo INT, --- 月份 MoneyData Float --- 金额 ) insert INTO TEM…

利用AIGC,零成本靠谱副业,每天半小时,挣个生活费不成问题,亲测,省时省力攻略

文章目录 背景为什么是写作如何操作申请各大创作平台的账号吸引人关注&#xff0c;增加粉丝利用AIGC来创作 看看其他好友分享的收入情况 背景 最近&#xff0c;尝试利用AIGC在头条号、微信公众号上开始写文章&#xff0c;并且通过这个机会赚取了一笔的外快。这个经历让我深刻认…

最强整理,HttpRunner接口自动化框架-hook机制实战,一篇上高速...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 对于使用 Python结…

谷歌广告(Google ads)如何投放?新手必看的超全教程

Google是公认的全球最大的搜索引擎&#xff0c;同时&#xff0c;Google还通过旗下的 YouTube、Gmail、Google Play、Android等产品&#xff0c;汇集了海量的海外用户。对于跨境出海商家来说&#xff0c;谷歌广告是提高销售额、提高产品流量、拓展全球市场的重要推广渠道。 那么…

从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi

Monorepo 前言开始一、使用turborepo初始化项目二、调整目录结构及文件1. 调整package.json文件2. 调整app目录3. 调整eslint包4. 调整ui包5. 调整eslint配置6. 调整.npmrc7. 使用commitizen规范代码提交8. 使用commitlinthusky进行 commit提交信息校验9. 使用husky进行commit前…