当前位置：首页 > article >正文

大白话跨域问题的原理与多种解决方法的实现

article 2026/3/25 19:10:46

大白话跨域问题的原理与多种解决方法的实现

跨域问题原理

简单来说，当一个网页中的JavaScript代码想要去访问另一个不同域名、端口或协议的服务器上的数据时，就会出现跨域问题。这是浏览器的一种安全机制，为了防止恶意网站窃取用户信息等。比如，你在自己家网站（www.example.com）上写的代码，想去访问别人家网站（www.other.com）的数据，浏览器就会觉得有风险，可能会阻止这个访问，这就是跨域问题。

解决方法及代码示例

JSONP（JSON with Padding）
- 原理：利用<script>标签没有跨域限制的特点，通过动态创建<script>标签来请求数据，服务器返回的是一段JavaScript代码，把数据放在一个函数调用里。
- 代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP Example</title>
</head><body><script>// 定义一个函数，用来处理服务器返回的数据function handleData(data) {console.log('Received data:', data);}// 创建一个script标签var script = document.createElement('script');// 设置script标签的src属性，指向服务器接口，并且带上回调函数名script.src = 'http://example.com/api/data?callback=handleData';// 将script标签添加到页面中document.head.appendChild(script);</script>
</body></html>

- **注释**：上述代码中，先定义了`handleData`函数用于处理服务器返回的数据。然后创建`<script>`标签，设置其`src`属性为服务器接口地址，并通过`callback`参数指定回调函数名。最后将`<script>`标签添加到页面，浏览器会自动加载该脚本，服务器返回的脚本会执行`handleData`函数并传入数据。

CORS（Cross-Origin Resource Sharing）
- 原理：服务器通过设置响应头，告诉浏览器哪些域名可以访问它的资源，浏览器根据这些响应头来决定是否允许跨域请求。
- 代码示例（以Express为例）

const express = require('express');
const app = express();// 允许所有域名访问，实际应用中应限制为具体域名
app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');next();
});app.get('/api/data', (req, res) => {const data = { message: 'Hello from server' };res.json(data);
});const port = 3000;
app.listen(port, () => {console.log(`Server running on port ${port}`);
});

- **注释**：首先引入`express`模块创建服务器。通过`app.use`中间件设置`Access-Control-Allow-Origin`响应头为`*`，表示允许所有域名访问，还设置了允许的请求方法和请求头。当访问`/api/data`接口时，服务器返回一个包含消息的JSON数据。

代理服务器
- 原理：在本地搭建一个代理服务器，浏览器先向代理服务器发送请求，代理服务器再向目标服务器请求数据，然后把数据返回给浏览器，这样就不存在跨域问题了，因为浏览器和代理服务器在同一个域。
- 代码示例（以webpack-dev-server代理为例）

// webpack.config.js
module.exports = {// 其他配置项...devServer: {proxy: {'/api': {target: 'http://example.com',changeOrigin: true}}}
};

- **注释**：在`webpack`配置文件中，通过`devServer.proxy`设置代理。当请求以`/api`开头时，`webpack-dev-server`会将请求转发到`http://example.com`，`changeOrigin`设置为`true`表示修改请求头中的`Origin`字段，使其与目标服务器的域名一致。

postMessage
- 原理：用于窗口之间的通信，比如一个页面中的iframe和父页面之间。可以通过postMessage方法发送消息，在接收方通过message事件监听接收消息。
- 代码示例

<!-- 父页面 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parent Page</title>
</head><body><iframe id="myFrame" src="http://example.com/child.html"></iframe><script>// 监听来自子窗口的消息window.addEventListener('message', function (event) {console.log('Received message from child:', event.data);});// 向子窗口发送消息const frame = document.getElementById('myFrame');frame.contentWindow.postMessage('Hello from parent', 'http://example.com');</script>
</body></html><!-- 子页面child.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Child Page</title>
</head><body><script>// 监听来自父窗口的消息window.addEventListener('message', function (event) {console.log('Received message from parent:', event.data);// 向父窗口回复消息event.source.postMessage('Hello from child', event.origin);});</script>
</body></html>

跨域问题常见的错误提示有哪些？
跨域问题出现时，浏览器或服务器通常会给出一些错误提示，以下是一些常见的错误提示及通俗解释：

Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy
- 解释：这句话的意思是，你的JavaScript代码通过XMLHttpRequest（一种常用的网络请求方式）去请求一个网址（‘xxx’）的数据，但是浏览器发现这个请求的来源网址（也就是你当前网页所在的网址’xxx’）和要请求的网址不一样，而且服务器那边没有设置允许你这个来源网址来请求数据，所以就按照跨域的规则把你的请求给拦住了，不允许访问。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource
- 解释：浏览器在请求数据时，发现服务器返回的信息里面没有Access-Control-Allow-Origin这个响应头。这个响应头本来是用来告诉浏览器，哪些网址可以访问这个服务器上的资源。现在没有这个头，浏览器就不知道让不让访问，所以就认为是跨域问题，阻止了请求。
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at xxx
- 解释：浏览器有一个“同源策略”，就是说一个网页里的代码通常只能访问和它在同一个域名、端口和协议下的资源。这里就是说你要访问的那个远程资源（‘xxx’）和当前网页不是同一个来源，违反了“同源策略”，所以浏览器把你的请求给拦住了，不让你读取那个远程资源的数据。
Failed to load xxx: No ‘Access-Control-Allow-Methods’ header is present on the requested resource
- 解释：和前面没有Access-Control-Allow-Origin头类似，这里是服务器返回的信息里没有Access-Control-Allow-Methods这个头。这个头是用来告诉浏览器，允许使用哪些HTTP方法（比如GET、POST等）来请求资源。没有这个头，浏览器就不知道能不能用你代码里的那种方法去请求，所以就报错说加载资源失败了，也是因为跨域问题导致的。
Request header field xxx is not allowed by Access-Control-Allow-Headers in preflight response
- 解释：在正式发送请求之前，浏览器可能会先发送一个“预检”请求，看看服务器支不支持你要发送的请求。这里说的是你请求头里面有个字段（‘xxx’），服务器在“预检”响应的Access-Control-Allow-Headers里没有允许这个字段。也就是说，服务器不允许你用这个字段来请求数据，所以就报错了，这也是跨域相关的一个错误提示。

除了JSONP，还有哪些方法可以解决跨域问题？

除了JSONP之外，解决跨域问题还有以下几种常见方法：

CORS（跨域资源共享）

原理：就是服务器设置一些响应头，告诉浏览器哪些域名的网页可以访问它的资源，以及允许使用哪些HTTP方法、请求头字段等。浏览器根据这些信息来判断这个跨域请求是否合法。
实现步骤
- 服务端配置：在服务器端设置Access-Control-Allow-Origin响应头，指定允许访问的源。比如，如果要允许http://example.com这个域名访问，就设置Access-Control-Allow-Origin: http://example.com。如果想允许所有域名访问，就设置为*。还可以设置Access-Control-Allow-Methods来指定允许的HTTP方法，如GET、POST等；设置Access-Control-Allow-Headers来指定允许的请求头字段。
- 客户端请求：客户端正常发送跨域请求就行，不用做特殊处理，浏览器会根据服务器返回的响应头来判断是否允许访问。
代码示例（以Node.js为例）

const express = require('express');
const app = express();// 设置允许跨域访问该服务的域名
app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', 'http://example.com');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');next();
});// 处理请求的路由
app.get('/data', (req, res) => {// 返回数据res.json({ message: '这是来自服务器的数据' });
});const port = 3000;
app.listen(port, () => {console.log(`服务器在端口 ${port} 上运行`);
});

代理服务器

原理：把跨域请求先发给自己服务器上的一个代理接口，然后由这个代理接口再去请求目标服务器的数据，最后把数据返回给客户端。因为代理接口和客户端代码在同一个域名下，所以就不存在跨域问题了。
实现步骤
- 搭建代理服务器：在自己的服务器上设置一个代理服务，它可以接收客户端的请求，然后转发到目标服务器。
- 配置代理规则：告诉代理服务器哪些请求需要转发，以及转发到哪里。比如，把客户端对/api/*路径的请求转发到http://targetserver.com/api/*。
- 客户端请求：客户端把原本要发给目标服务器的请求，改成发给代理服务器的接口。
代码示例（以使用http-proxy-middleware为例）

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// 创建代理中间件
const proxy = createProxyMiddleware('/api', {target: 'http://targetserver.com', // 目标服务器地址changeOrigin: true
});// 使用代理中间件
app.use(proxy);const port = 3000;
app.listen(port, () => {console.log(`服务器在端口 ${port} 上运行`);
});

WebSocket

原理：WebSocket是一种在单个TCP连接上进行全双工通信的协议，它不受同源策略的限制，可以在不同源的客户端和服务器之间进行通信。
实现步骤
- 服务端实现：在服务器端使用WebSocket库来创建WebSocket服务器，监听客户端的连接请求，接收和处理客户端发送的消息，向客户端发送消息。
- 客户端实现：在客户端使用WebSocket API来连接服务器，发送和接收消息。
代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket示例</title>
</head><body><script>// 创建WebSocket连接const socket = new WebSocket('ws://example.com:8080');// 连接成功后的回调socket.onopen = function () {console.log('连接成功');// 发送消息socket.send('这是客户端发送的消息');};// 接收消息的回调socket.onmessage = function (event) {console.log('收到服务器消息：', event.data);};// 连接关闭的回调socket.onclose = function () {console.log('连接关闭');};</script>
</body></html>

const WebSocket = require('ws');// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function (ws) {console.log('有客户端连接');// 接收客户端消息ws.on('message', function (message) {console.log('收到客户端消息：', message);// 向客户端发送消息ws.send('这是服务器回复的消息');});// 客户端关闭连接的处理ws.on('close', function () {console.log('客户端连接关闭');});
});

postMessage

原理：HTML5的postMessage API允许在不同源的窗口之间进行安全的跨域通信。比如在一个网页中嵌入了另一个不同源的iframe，就可以通过postMessage来实现它们之间的通信。
实现步骤
- 发送消息：在发送消息的窗口中，使用postMessage方法发送消息，指定要发送的数据和目标窗口的源。
- 接收消息：在接收消息的窗口中，监听message事件，在事件回调中处理接收到的消息。
代码示例

<!-- 主页面 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主页面</title>
</head><body><iframe id="myFrame" src="http://example.com/iframe.html"></iframe><script>const iframe = document.getElementById('myFrame');// 向iframe发送消息iframe.contentWindow.postMessage('这是主页面发送的消息', 'http://example.com');// 接收来自iframe的消息window.addEventListener('message', function (event) {if (event.origin === 'http://example.com') {console.log('收到iframe的消息：', event.data);}});</script>
</body></html>

<!-- iframe页面 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe页面</title>
</head><body><script>// 接收来自主页面的消息window.addEventListener('message', function (event) {if (event.origin === 'http://main.com') {console.log('收到主页面的消息：', event.data);// 向主页面发送回复消息window.parent.postMessage('这是iframe页面的回复', 'http://main.com');}});</script>
</body></html>

如何在前后端分离的项目中处理跨域问题？
在前后端分离的项目里，处理跨域问题主要有在前端处理和在后端处理两种思路，以下是一些常见的方法及具体做法：

前端处理

使用代理服务器
- 原理：利用开发服务器提供的代理功能，将前端对后端接口的请求转发到真实的后端服务器地址，让浏览器以为所有请求都在同一个域内，从而避开浏览器的跨域限制。
- 操作：以Vue项目为例，在vue.config.js文件中可以进行如下配置：

module.exports = {devServer: {proxy: {'/api': {target: 'http://backendserver.com', // 后端服务器地址changeOrigin: true,pathRewrite: {'^/api': '' // 重写路径，去除/api前缀}}}}
};

- **效果**：这样配置后，前端代码中所有以`/api`开头的请求都会被代理到`http://backendserver.com`，就像请求本地资源一样，解决了跨域问题。

后端处理

CORS（跨域资源共享）
- 原理：服务器通过设置特定的响应头，告诉浏览器哪些域名的前端页面可以访问它的资源，以及允许使用哪些HTTP方法、请求头字段等，让浏览器能够判断这个跨域请求是否合法。
- 操作：以使用Express框架的Node.js后端为例，可以这样设置：

const express = require('express');
const app = express();// 设置允许跨域访问该服务的域名
app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', 'http://frontend.com'); // 替换为前端域名res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');next();
});// 处理请求的路由
app.get('/data', (req, res) => {// 返回数据res.json({ message: '这是来自服务器的数据' });
});const port = 3000;
app.listen(port, () => {console.log(`服务器在端口 ${port} 上运行`);
});

- **效果**：上述代码设置了允许`http://frontend.com`这个域名的前端页面访问后端的`/data`接口，并且允许使用`GET`、`POST`、`PUT`、`DELETE`这些HTTP方法，请求头中可以包含`Content-Type`字段。

JSONP
- 原理：利用<script>标签不受同源策略限制的特点，通过动态创建<script>标签来请求跨域数据，服务器返回的是一段JavaScript代码，通常是一个函数调用，把数据作为参数传递给这个函数，前端通过定义这个函数来处理接收到的数据。
- 操作：后端代码示例（以Express为例）：

const express = require('express');
const app = express();app.get('/data.jsonp', (req, res) => {const callback = req.query.callback;const data = { message: '这是来自服务器的JSONP数据' };// 将数据包装成函数调用的形式返回res.send(`${callback}(${JSON.stringify(data)})`);
});const port = 3000;
app.listen(port, () => {console.log(`服务器在端口 ${port} 上运行`);
});

- **效果**：前端页面可以通过以下方式请求数据：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP示例</title>
</head><body><script>function handleData(data) {console.log(data.message);}// 动态创建script标签const script = document.createElement('script');script.src = 'http://backendserver.com/data.jsonp?callback=handleData';document.head.appendChild(script);</script>
</body></html>

上述代码中，前端通过动态创建<script>标签，请求后端的/data.jsonp接口，并指定callback参数为handleData，后端将数据包装成handleData({ message: '这是来自服务器的JSONP数据' })的形式返回，前端的handleData函数就可以接收到并处理数据。不过要注意，JSONP只支持GET请求。

大白话跨域问题的原理与多种解决方法的实现

大白话跨域问题的原理与多种解决方法的实现跨域问题原理简单来说，当一个网页中的JavaScript代码想要去访问另一个不同域名、端口或协议的服务器上的数据时，就会出现跨域问题。这是浏览器的一种安全机制，为了防止恶意网站窃取用户信息等。…...

编程日记 2026/3/1 18:54:50

el-table input textarea 文本域自适应高度，切换分页滚动失效处理办法

场景： el-table 表格需要 input类型是 textarea 高度是自适应，第一页数据都是单行数据不会产生滚动条，但是第二页数据是多行数据会产生滚动条， bug: 第一页切换到第二页第二页滚动条无法展示解决办法：直接修改样…...

编程日记 2026/2/28 5:16:49

动态表头报表的绘制与导出

目录一、效果图二、整体思路三、代码区一、效果图根据选择的日期范围动态生成表头（eg：2025.2.24--2025.03.03）每个日期又分为白班、夜班；数据列表中对产线合并单元格。支持按原格式导出对应的报表excel。点击空白区可新…...

编程日记 2026/3/16 20:37:01

DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2026/3/16 20:34:37

【解决】OnTriggerEnter/OnTriggerExit 调用匿名委托误区的问题

开发平台：Unity 开发语言：CSharp 6.0 开发工具：Visual Studio 2022 问题背景 public void OnTriggerEnter(Collider collider) {output.OnInteractionNoticed () > OnInteractionTriggered?.Invoke(); }public void OnTriggerExit(C…...

编程日记 2026/2/14 17:07:32

Linux 基础---文件权限

概念文件权限是针对文件所有者、文件所属组、其他人这三类人而言的，对应的操作是chmod。设置方式：文字设定法、数字设定法。文字设定法：r,w,x,- 来描述用户对文件的操作权限数字设定法：0,1,2,3,4,5,6,7 来描述用户对文件的操作…...

编程日记 2026/3/18 2:19:49

SpringBoot五：JSR303校验

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取松散绑定意思是比如在yaml中写的是last-name，这个和lastName意思是一样的，-后的字母默认是大写的 JSR303校验就是可以在字段增加…...

编程日记 2026/3/16 20:39:23

【计算机网络】考研复试高频知识点总结

文章目录一、基础概念1、计算机⽹络的定义2、计算机⽹络的目标3、计算机⽹络的组成4、计算机⽹络的分类5、计算机⽹络的拓扑结构6、计算机⽹络的协议7、计算机⽹络的分层结构8、OSI 参考模型9、TCP/IP 参考模型10、五层协议体系结构二、物理层1、物理层的功能2、传输媒体3、 …...

编程日记 2026/3/22 21:13:27

Error Density-dependent Empirical Risk Minimization

经验误差密度依赖的风险最小化 v.s. 经验风险最小化论文： 《 Error Density-dependent Empirical Risk Minimization》发表在： ESWA’24 相关代码： github.com/zxlml/EDERM 研究背景传统的经验风险最小化（ERM）方…...

编程日记 2026/3/15 18:38:17

02_NLP文本预处理之文本张量表示法

文本张量表示法概念将文本使用张量进行表示,一般将词汇表示为向量,称为词向量,再由各个词向量按顺序组成矩阵形成文本表示例如: ["人生", "该", "如何", "起头"]># 每个词对应矩阵中的一个向量 [[1.32, 4,32, 0,32, 5.2],[3…...

编程日记 2026/3/25 15:44:49

Spring Boot全局异常处理：“危机公关”团队

目录一、全局异常处理的作用二、Spring Boot 实现全局异常处理（附上代码实例）三、总结： 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式，可以多多支持一下，感谢&#x1…...

编程日记 2026/3/16 7:55:53

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_list_init

ngx_list_init 定义在 src\core\ngx_list.h static ngx_inline ngx_int_t ngx_list_init(ngx_list_t *list, ngx_pool_t *pool, ngx_uint_t n, size_t size) {list->part.elts ngx_palloc(pool, n * size);if (list->part.elts NULL) {return NGX_ERROR;}list->par…...

编程日记 2026/3/16 4:54:17

C# OnnxRuntime部署DAMO-YOLO香烟检测

目录说明效果模型信息项目代码下载参考说明效果模型信息 Model Properties ------------------------- --------------------------------------------------------------- Inputs ------------------------- name：input tensor：Floa…...

编程日记 2026/3/24 10:49:38

GitHub开源协议选择指南：如何为你的项目找到最佳“许可证”？

引言当你站在GitHub仓库创建的十字路口时，是否曾被众多开源协议晃花了眼？ 别担心！这篇指南将化身你的"协议导航仪"，用一张流程图五个灵魂拷问，帮你轻松找到最佳选择。无论你是开发者、开源爱好者&#xff…...

编程日记 2025/11/19 3:29:10

[密码学实战]Java生成SM2根证书及用户证书

前言在国密算法体系中，SM2是基于椭圆曲线密码（ECC）的非对称加密算法，广泛应用于数字证书、签名验签等场景。本文将结合代码实现，详细讲解如何通过Java生成SM2根证书及用户证书，并深入分析其核心原理。一、证书验证 1.代码运行结果 2.根证书验证 3.用户证书验证二、…...

编程日记 2026/3/20 14:58:46

安装 cnpm 出现 Unsupported URL Type “npm:“: npm:string-width@^4.2.0

Unsupported URL Type "npm:": npm:string-width^4.2.0 可能是 node 版本太低了，需要安装低版本的 cnpm 试试 npm cache clean --force npm config set strict-ssl false npm install -g cnpm --registryhttps://registry.npmmirror.com 改为 npm insta…...

编程日记 2026/3/16 13:57:35

探秘基带算法：从原理到5G时代的通信变革【九】QPSK调制/解调

文章目录 2.8 QPSK 调制 / 解调简介QPSK 发射机的实现与原理QPSK 接收机的实现与原理QPSK 性能仿真QPSK 变体分析本博客为系列博客，主要讲解各基带算法的原理与应用，包括：viterbi解码、Turbo编解码、Polar编解码、CORDIC算法、CRC校验、FFT/…...

编程日记 2026/3/16 20:36:44

四、数据存储

在爬虫项目中，我们需要将目标站点数据进行持久化保存，一般数据保存的方式有两种： 文件保存数据库保存在数据保存的过程中需要对数据完成去重操作，所有需要使用 redis 中的 set 数据类型完成去重。 1.CSV文件存储 1.1 什么是c…...

编程日记 2026/3/16 4:02:04

C# OnnxRuntime部署DAMO-YOLO人头检测

编程日记 2026/3/16 20:34:43

Metal学习笔记七：片元函数

知道如何通过将顶点数据发送到 vertex 函数来渲染三角形、线条和点是一项非常巧妙的技能 — 尤其是因为您能够使用简单的单行片段函数为形状着色。但是，片段着色器能够执行更多操作。 ➤ 打开网站 https://shadertoy.com，在那里您会发现大量令人眼花缭乱…...

编程日记 2026/3/15 21:25:33

《一个端粒到端粒的参考基因组为木瓜中五环三萜类化合物生物合成提供了遗传学见解》

A telomere-to-telomere reference genome provides genetic insight into the pentacyclic triterpenoid biosynthesis in Chaenomeles speciosa Amplification of transposable elements 转座元件的扩增 Sequence mining disclosed that TEs were one main event in the ex…...

编程日记 2025/10/26 17:41:42

大白话跨域问题的原理与多种解决方法的实现

跨域问题原理

解决方法及代码示例

CORS（跨域资源共享）

代理服务器

WebSocket

postMessage

前端处理

后端处理

相关文章：