最常用的四种跨域解决方案
ccwgpt 2025-04-27 12:50 25 浏览 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 就是让服务器转发自己的跨域请求，因为服务器不受到跨域策略限制。
相关推荐
- 2025南通中考作文解读之四:结构框架
-
文题《继续走，迈向远方》结构框架：清晰叙事，层层递进示例结构：1.开头（点题）：用环境描写或比喻引出“走”与“远方”，如“人生如一条长路，每一次驻足后，都需要继续走，才能看见更美的风景”。2.中间...
- 高中数学的知识框架（高中数学知识框架图第三章）
-
高中数学的知识框架可以划分为多个核心板块，每个板块包含具体的知识点与内容，以下为详细的知识框架结构：基础知识1.集合与逻辑用语：涵盖集合的概念、表示方式、性质、运算，以及命题、四种命题关系、充分条件...
- 决定人生的六大框架（决定人生的要素）
-
45岁的自己混到今天，其实是失败的，要是早点意识到影响人生的六大框架，也不至于今天的模样啊！排第一的是环境，不是有句话叫人是环境的产物，身边的环境包括身边的人和事，这些都会对一个人产生深远的影响。其次...
- 2023年想考过一级造价师土建计量，看这30个知识点(三)
-
第二章工程构造考点一:工业建筑分类[考频分析]★★★1.按厂房层数分:(1)单层厂房;(2)多层厂房;(3)混合层数厂房。2.按工业建筑用途分:(1)生产厂房;(2)生产辅助厂房;(3)动力用厂房;(...
- 一级建造师习题集-建筑工程实务(第一章-第二节-2)
-
建筑工程管理与实务题库（章节练习）第一章建筑工程技术第二节结构设计与构造二、结构设计1.常见建筑结构体系中，适用建筑高度最小的是()。A.框架结构体系B.剪力墙结构体系C.框架-剪力墙结构体系D...
- 冷眼读书丨多塔斜拉桥，这么美又这么牛
-
”重大交通基础设施的建设是国民经济和社会发展的先导，是交通运输行业新技术集中应用与创新的综合体现。多塔斜拉桥因跨越能力强、地形适应性强、造型优美等特点，备受桥梁设计者的青睐，在未来跨越海峡工程中将得...
- 2021一级造价师土建计量知识点:民用建筑分类
-
2021造价考试备考开始了，学霸君为大家整理了一级造价师备考所用的知识点，希望对大家的备考道路上有所帮助。 民用建筑分类 一、按层数和高度分 1.住宅建筑按层数分类：1～3层为低层住宅，4～6层...
- 6个建筑结构常见类型，你都知道吗?
-
建筑结构是建筑物中支承荷载（作用）起骨架作用的体系。结构是由构件组成的。构件有拉（压）杆、梁、板、柱、拱、壳、薄膜、索、基础等。常见的建筑结构类型有6种：砖混结构、砖木结构、框架结构、钢筋混凝土结构、...
- 框架结构设计经验总结（框架结构设计应注意哪些问题）
-
1.结构设计说明主要是设计依据，抗震等级，人防等级，地基情况及承载力，防潮抗渗做法，活荷载值，材料等级，施工中的注意事项，选用详图，通用详图或节点，以及在施工图中未画出而通过说明来表达的信息。2.各...
- 浅谈混凝土框架结构设计（混凝土框架结构设计主要内容）
-
浅谈混凝土框架结构设计 摘要：结构设计是个系统的全面的工作，需要扎实的理论知识功底，灵活创新的思维和严肃认真负责的工作态度。钢筋混凝土框架结构虽然相对简单，但设计中仍有很多需要注意的问题。本文针...
- 2022一级建造师《建筑实务》1A412020 结构设计 精细考点整理
-
历年真题分布统计1A412021常用建筑结构体系和应用一、混合结构体系【2012-3】指楼盖和屋盖采用钢筋混凝土或钢木结构，而墙和柱采用砌体结构建造的房屋，大多用在住宅、办公楼、教学楼建筑中。优点：...
- 破土动工!这个故宫“分院”科技含量有点儿高
-
故宫“分院”设计图。受访者供图近日，位于北京海淀区西北旺镇的故宫北院区项目已开始破土动工，该项目也被称作故宫“分院”，筹备近十年之久。据悉，故宫本院每年展览文物的数量不到1万件，但是“分院”建成后，预...
- 装配式结构体系介绍(上)（装配式结构如何设计）
-
PC构件深化、构件之间连接节点做法等与相应装配式结构体系密切相关。本节列举目前常见的几种装配式结构体系：装配整体式混凝土剪力墙结构体系、装配整体式混凝土框架结构体系、装配整体式混凝土空腔结构体系（S...
- 这些不是双向抗侧结构体系（这些不是双向抗侧结构体系的特点）
-
双向抗侧土木吧规范对双向抗恻力结构有何规定？为何不应采用单向有墙的结构？双向抗侧土木吧1.规范对双向抗侧力结构体系的要求抗侧力体系是指抵抗水平地震作用及风荷载的结构体系。对于结构体系的布置，规范针对...
- 2022一级建造师《建筑实务》1A412020 结构设计 精细化考点整理
-
1A412021常用建筑结构体系和应用一、混合结构体系【2012-3】指楼盖和屋盖采用钢筋混凝土或钢木结构，而墙和柱采用砌体结构建造的房屋，大多用在住宅、办公楼、教学楼建筑中。优点：抗压强度高，造价...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)