最常用的四种跨域解决方案
ccwgpt 2025-04-27 12:50 30 浏览 0 评论
前置知识
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
同源策略
同源机制是浏览器处于安全考虑，只允许相同源的接口进行相互通信。不同源的接口在没有得到对方授权的情况下不能够读写对方的资源。这个很好理解，如果没有同源机制，浏览器中的cookie就可以被随意读取，一旦用户进入恶意网站，恶意网站就可以读取用户的cookie，伪造用户进行登陆转款等操作。
同源策略的交互方式有三种：
- 通常允许跨域写操作，例如链接，重定向等。
- 通常允许跨域嵌套资源，例如 img，script 标签等。
- 通常不允许跨域读操作。
同源指的的是同时满足以下三个条件的地址：
- 同协议，如http或https
- 同域名，如www.baidu.com/login和www.baidu.com/addProduct是同域名，其中www.baidu.com是域名
- 同端口，如80端口等
如：
http://www.baidu.com https://www.baidu.com //这两个网址由于协议不同，因此不属于同源 http://www.baidu.top http://www.baidu.com //这两个网址由于域名不同，因此不属于同源 http://www.baidu.com:80 http://www.baidu.com:8080 //这两个网址由于端口不同，因此不属于同源 https://www.baidu.com/login https://www.baidu.com/add //这两个网址属于同源
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"
Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
cors具体设置根据使用的后端语言不同会有所区别，此处以node的express框架设置为例：
客户端设置：
<script>
$.ajax({
type: 'post',
url: 'http://127.0.0.1:5000',
success: function(res) {
console.log('成功跨域');
console.log(res);
}
})
</script>
node端设置：
res.header("Access-Control-Allow-Origin", "*");//允许所有地址跨域访问服务器资源
2.jsonp
我们在开始讲同源策略的时候提到过，同源策略是允许script标签跨域访问资源的。jsonp方法就是利用的这个原理跨域的。
以Jquery的ajax请求为例：
<script>
function jsonpCallback(data){
console.log("成功跨域，数据为:",data) ;
}
$.ajax({
method:"GET",
url:"https://www.baidu.com",
dataType:"jsonp",
jsonpCallback:"jsonpCallback" //设置jsonp的回调函数
})
<script>
优缺点：
- 兼容性好，低版本的 IE 也支持这种方式。
- 只能支持get方式的 HTTP 请求。
3.window.postMessage
postMessage跨域方法是HTML5的新特性，该方法必须接受两个参数：
- message：需要传递的数据信息
- targetOrigin：需要发送请求的目标地址
示例：
发送端代码：
http://localhost:8081/send.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="post()" value="send">
<script>
var my_window=window.open("http://localhost:8082/index.html");
function post() {
var data={
name:"martin",
age:18
};
my_window.postMessage(JSON.stringify(data),"http://localhost:8082/index.html");
}
</script>
</body>
</html>
点击send按钮，send端跨域postMessage发出一个字符串
接收端代码：
http://localhost:8082/reciever.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<script>
window.addEventListener("message",function (message) {
if(message.origin=="http://localhost:8081"){ //检验信息的来源，只要想要地址发送的信息
var input=document.getElementsByTagName("input")[0];
input.value=message.data; //将接收到的信息填入input框
console.log(message);
}
})
</script>
</body>
</html>
此时观察接受地址的input框，发现已经接受到了数据，至此跨域成功。
备注：想要将几个网页在不同的端口打开，可以安装http-server这个node模块，无需配置，即装即用。
4.proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
示例：
当前状况：
- 浏览器前端域为http://localhost:3000，该页面提供了接口可以向服务端http://localhost:3001发送请求
需求：
- 需要浏览器跨域向http://localhost:3002发送请求
代理跨域：
- 让3000端口的前端先向3001端口的服务端发送请求，然后再让服务端向目标地址3002端口发送请求
- 然后服务端再将响应数据转发给前端网页
总结：
从这个例子的描述中可以看出，代理跨域方案说白了就是让代理作为一个中间人，在前端和目标地址之间担任一个信息转发的功能，就有点像婆媳有矛盾不能直接沟通，所有一般让丈夫做为中间人来传话。
总结
- 协议，域名，端口号不全相同的资源之间相互通信时，就会产生跨域问题。
- 出于安全考虑，浏览器的同源策略限制了不同域之间相互通信。
- JSONP，CORS，Server Proxy都是常用的前后端跨域通信的解决方式，postMessage跨域解决方案主要是解决窗口页面之间的数据通信。
- JSONP 只支持 GET 方式的 HTTP 请求。
- CORS 跨域方案是在后端进行设置的。
- Server Proxy 就是让服务器转发自己的跨域请求，因为服务器不受到跨域策略限制。
相关推荐
- 自己动手写Android数据库框架_android开发数据库搭建
-
http://blog.csdn.net/feiduclear_up/article/details/50557590推荐理由关于Android数据库操作，由于每次都要自己写数据库操作，每次还得去...
- 谷歌开源大模型评测工具LMEval，打通谷歌、OpenAI、Anthropic
-
智东西编译|金碧辉编辑|程茜智东西5月28日消息，据科技媒体TheDecoder5月26日报道，当天，谷歌正式发布开源大模型评测框架LMEval，支持对GPT-4o、Claude3.7...
- 工信部:着力推动大模型算法、框架等基础性原创性的技术突破
-
工信部新闻发言人今日在发布会上表示，下一步，我们将坚持突出重点领域，大力推动制造业数字化转型，推动人工智能创新应用。主要从以下四个方面着力。一是夯实人工智能技术底座。通过科技创新重大项目，着力推动大模...
- 乒乓反复纠结“框架不稳定”的三个小误区
-
很多球友由于对框架的认知不清晰，往往会把“框架不稳定”当成一种心理负担，从而影响学球进度，其典型状态就是训练中有模有样，一旦进入实战，就像被捆住了手脚。通过训练和学习，结合“基本功打卡群”球友们交流发...
- 前AMD、英特尔显卡架构师Raja再战GPU，号称要全面重构堆栈
-
IT之家8月5日消息，知名GPU架构师拉贾科杜里(RajaKoduri)此前曾先后在AMD和英特尔的显卡部门担任要职。而在今日，由Raja创立的GPU软件与IP初创企...
- 三种必须掌握的嵌入式开发程序架构
-
前言在嵌入式软件开发，包括单片机开发中，软件架构对于开发人员是一个必须认真考虑的问题。软件架构对于系统整体的稳定性和可靠性是非常重要的，一个合适的软件架构不仅结构清晰，并且便于开发。我相...
- 怪不得别人3秒就知道软考案例怎么做能50+
-
软考高级统一合格标准必须三科都达到45分，案例分析也一直是考生头疼的一门，但是掌握到得分点，案例能不能50+还不是你们说了算吗？今天就结合架构案例考点，分享实用的备考攻略～一、吃透考点，搭建知识框架从...
- UML统一建模常用图有哪些，各自的作用是什么?一篇文章彻底讲透
-
10万+爆款解析：9大UML图实战案例，小白也能秒懂！为什么需要UML？UML（统一建模语言）是软件开发的“蓝图”，用图形化语言描述系统结构、行为和交互，让复杂需求一目了然。它能：降低沟通成本避...
- 勒索软件转向云原生架构，直指备份基础设施
-
勒索软件组织和其他网络犯罪分子正越来越多地将目标对准基于云的备份系统，对久已确立的灾难恢复方法构成了挑战。谷歌安全研究人员在一份关于云安全威胁演变的报告中警告称，随着攻击者不断改进数据窃取、身份泄露和...
- ConceptDraw DIAGRAM:释放创意，绘就高效办公新未来
-
在当今数字化时代，可视化工具已成为提升工作效率和激发创意的关键。ConceptDrawDIAGRAM，作为一款世界顶级的商业绘图软件，凭借其强大的功能和用户友好的界面，正逐渐成为众多专业人士的首选绘...
- APP 制作界面设计教程:一步到位_app界面设计模板一套
-
想让APP界面设计高效落地，无需繁琐流程，掌握“框架搭建—细节填充—体验优化”三步法，即可一步到位完成专业级设计。黄金框架搭建是基础。采用“三三制布局”：将屏幕横向三等分，纵向保留三...
- MCP 的工作原理:关键组件_mcp部件
-
以下是MCP架构的关键组件：MCP主机：像ClaudeDesktop、GitHubCopilot或旅行助手这样的AI智能体，它们希望通过MCP协议访问工具、资源等。MCP主机会...
- 软件架构_软件架构师工资一般多少
-
软件架构师自身需要是程序员，并且必须一直坚持做一线程序员。软件架构应该是能力最强的一群程序员，他们通常会在自身承接编程任务的同时，逐渐引导整个团队向一个能够最大化生产力的系统设计方向前进。软件系统的架...
- 不知不觉将手机字体调大!老花眼是因为“老了吗”?
-
现在不管是联系、交友，还是购物，都离不开手机。中老年人使用手机的时间也在逐渐加长，刷抖音、看短视频、发朋友圈……看手机的同时，人们也不得不面对“视力危机”——老花眼，习惯眯眼看、凑近看、瞪眼看，不少人...
- 8000通用汉字学习系列讲座(第046讲)
-
[表声母字]加(续)[从声汉字]伽茄泇迦枷痂袈笳嘉驾架咖贺瘸(计14字)嘉[正音]标准音读jiā。[辨形]上下结构，十四画。会意形声字，从壴从加，加也表声。注：从壴，字义与鼓乐有关；从加，字义与...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- 知识框架图 (52)
- ppt框架 (55)
- 框架图模板 (59)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)