最常用的四种跨域解决方案
ccwgpt 2025-04-27 12:50 7 浏览 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 就是让服务器转发自己的跨域请求，因为服务器不受到跨域策略限制。
相关推荐
- NestJS入门教程系列一
-
介绍Nest（NestJS）是用于构建高效，可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript，内置并完全支持TypeScript（但开发人员仍然能够使用JavaScrip...
- 【推荐】一个网盘资源搜索与转存工具，支持移动端与PC端!
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍CloudSaver是一个基于Vue3和Express的网盘资源搜索与转存开源实用工具。它支持...
- Appium原理精讲
-
目前使用Appium新版本和旧版本的企业数目都很多，而两个版本的安装过程和api的使用又有较大的区别。但是无论表面上的东东如何变化，内部原理都是一样的。在这里我给大家介绍一下appium的核心，增进大...
- Kubernetes最小部署单元Pod
-
一、Kubernetes与Pod简介在当今云计算和容器化技术盛行的时代，Kubernetes已然成为容器编排领域的中流砥柱。它是一个开源的容器编排平台，由Google基于其内部使用的Bo...
- 最常用的四种跨域解决方案
-
前置知识什么是跨域？浏览器发送的请求地址（URL）与所在页面的地址不同（端口/协议/域名其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收服务器...
- Bolt.New —— 全栈AI Web自动编程
-
Bolt.New是由StackBlitz公司推出的，全栈AI工具，代码编辑、运行、部署，通通一站式搞定。它使用WebContainers技术，无需任何本地安装或配置，在浏览器中，就可以运行完整的No...
- Nodejs Express新手教程&高手进阶
-
NodejsExpress新手教程&高手进阶Express是一个NodeJS平台的框架，主要用于构于Web服务器项目。本文将通过示例介绍适合新手入门的Express基础使用，以及高手进阶知识，如：c...
- Express.js 创建Node.js Web应用
-
Express.js是一个基于Node.js的Web应用框架，框架的设计目的是构建应用的架构和简化应用的开发。框架会解决一些通用的问题，在Express.js中，Express框架会处理如：中间件、代...
- JavaScript 的 Express.js 功能及应用场景详解
-
Express.js是一个基于Node.js的轻量级Web应用框架，主要用于快速构建服务器端应用和API。它的核心功能包括以下关键点：1.路由管理URL路径与HTTP方法映射：通过...
- nodejs的express4文件下载
-
在nodejs的express框架中,下载变得非常简单,就一个方法,res.download()首先express命令行生成项目基本框架:不会的看这里:http://blog.csdn.net/zz...
- Express 系列:快速生成一个项目
-
系列预告本系列将以一个项目入手结合相关技术细节来带领大家一起学习Express这个基于Node.js的后端框架。本文首先将介绍：如何快速的生成一个具有一定结构的Express项目。Express项目结...
- nodejs的express自动生成项目框架
-
nodejs版本为:4.X,express版本为4.X1.全局安装2个模块express、express-generator在命令行输入:npminstall-gexpressnpminsta...
- express开发(一)简介与搭建
-
上周末去了趟上海书城，不愧是上海数得上号的书城，流行的科技书应有尽有，话不多说直接上图。最经典的C语言O(∩_∩)O最流行的java(づ￣3￣)づ超酷的R语言/(ㄒoㄒ)/~~然而，身为一个坚定的前...
- Vue+Echarts可视化大屏系统后端框架搭建(附代码)
-
各位同学，大家好。上节课，前面我们讲解了Vue+Echarts前端部分的设计方法。这节课程，我们开始讲解使用Express进行后端设计的方法。01项目相关理论介绍什么是expressExpress是...
- Shopify电商API接口开发
-
Shopify电商API接口开发上线流程主要包括以下步骤。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎洽谈合作。前期准备-注册Shopify账号：在Shopify官网注册，用于后续开发测试...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- scrapy框架 (52)
- beego框架 (42)
- java框架spring (43)
- grpc框架 (55)
- 前端框架bootstrap (42)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)