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

技术支持人员发现跨域问题，该如何处理

news 来源：原创 2025/7/4 23:57:14

跨域问题通常是由于浏览器的同源策略（Same-Origin Policy）引起的。简而言之，浏览器阻止了一个域上的网页访问另一个域的资源，目的是为了安全性。跨域问题通常发生在以下场景：

在一个网站的前端应用程序（如 React、Vue 等）中发起 HTTP 请求时，该请求的目标与当前网页的源（协议、域名、端口）不同。
比如：前端页面运行在 http://example.com，但请求的 API 地址是 https://api.example.com。

解决跨域问题的方法：

以下是一些常见的处理跨域问题的方案。

1. CORS（跨域资源共享）

CORS 是一种常见的解决跨域问题的方式。它通过在服务器端设置 HTTP 响应头来允许浏览器跨域访问资源。

服务器端配置 CORS 头部：
服务器需要在响应中设置适当的 CORS 头部，以允许跨域请求。

Access-Control-Allow-Origin: *   // 允许所有源
Access-Control-Allow-Origin: https://example.com   // 仅允许指定的域
Access-Control-Allow-Methods: GET, POST, PUT   // 允许的请求方法
Access-Control-Allow-Headers: Content-Type   // 允许的请求头部
Access-Control-Allow-Credentials: true   // 是否允许携带 Cookie

示例：
在 Node.js 的 Express 服务器中，使用 cors 中间件来设置这些头部：

const express = require('express');
const cors = require('cors');
const app = express();// 允许所有来源的跨域请求
app.use(cors());// 或者只允许特定的源
// app.use(cors({ origin: 'https://example.com' }));app.get('/data', (req, res) => {res.json({ message: 'This is cross-origin data.' });
});app.listen(3000, () => console.log('Server running on http://localhost:3000'));

预检请求（OPTIONS 请求）：
如果客户端发送的是复杂请求（如带有非简单请求头，或使用了 PUT 或 DELETE 请求方法），浏览器会先发起一个 OPTIONS 请求（预检请求）来探测服务器是否支持跨域。服务器需要响应这个 OPTIONS 请求并返回适当的 CORS 头部。
```
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
```

2. JSONP（JSON with Padding）

JSONP 是一种老旧的解决跨域问题的方法，它通过动态 <script> 标签来实现跨域请求。由于 <script> 标签不受同源策略限制，浏览器允许从任何域加载脚本。JSONP 适用于 GET 请求。

客户端代码：

function handleResponse(data) {console.log(data);
}var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器端返回：

handleResponse({ message: 'This is cross-origin data.' });

注意： JSONP 只支持 GET 请求，且由于是通过 script 标签加载脚本，所以它不适用于传输敏感数据（如 Cookie），并且存在一定的安全隐患。

3. 代理（Proxy）

代理是一种常见的解决方案，尤其是在开发过程中，使用本地代理来绕过跨域问题。通过在本地启动一个代理服务器，转发请求到目标服务器。这样，浏览器只会与本地代理服务器通信，而不会直接与远程服务器通信，从而避免了跨域问题。

在前端应用中使用代理：
在开发环境中，可以使用像 webpack-dev-server 或 create-react-app 提供的代理功能。比如，React 中的 package.json 文件可以配置代理：
```
{"proxy": "https://api.example.com"
}
```
这样，所有请求会被代理到 https://api.example.com，避免了跨域问题。

Node.js 代理：
如果是 Node.js 服务器，可以使用像 http-proxy-middleware 这样的中间件来创建代理。

const express = require('express');
const proxy = require('http-proxy-middleware');const app = express();app.use('/api', proxy({ target: 'https://api.example.com', changeOrigin: true }));app.listen(3000);

4. WebSocket

WebSocket 是一种双向通信协议，能够跨域通信。在 WebSocket 中，客户端与服务器之间建立的是一个持久化连接，之后所有的数据交换都不受同源策略的限制。可以在某些实时数据应用场景中使用。

客户端代码：

const socket = new WebSocket('ws://example.com/socket');socket.onopen = function() {console.log('WebSocket connection established');
};socket.onmessage = function(event) {console.log('Received message:', event.data);
};

5. 服务器端代理

如果无法直接在前端设置跨域请求，可以通过在服务器端设置代理，代为请求目标 API，进而解决跨域问题。客户端请求你的服务器，你的服务器代为请求第三方 API，然后将数据返回给客户端。

6. PostMessage（用于跨窗口通信）

当需要在不同的浏览器窗口、框架或嵌套的 iframe 之间进行跨域通信时，可以使用 postMessage 方法。postMessage 允许跨源的窗口或 iframe 之间发送消息，消息内容可以是任意类型的数据。

// 在子页面中
window.postMessage('Hello from iframe', 'https://parent.com');// 在父页面中
window.addEventListener('message', function(event) {if (event.origin === 'https://iframe.com') {console.log('Received message: ', event.data);}
});

总结

跨域问题可以通过以下几种方法解决：

CORS：最常用的方法，适用于所有常见的跨域场景。
JSONP：只适用于 GET 请求，但现在已较少使用。
代理：在开发中非常常见，适用于跨域请求的场景。
WebSocket：适用于实时通信的应用。
PostMessage：用于跨窗口或跨 iframe 的通信。

选择哪种方法取决于你的具体需求和应用场景。如果是与服务器的跨域请求，优先考虑使用 CORS 或代理。

技术支持人员发现跨域问题，该如何处理

跨域问题通常是由于浏览器的同源策略（Same-Origin Policy）引起的。简而言之，浏览器阻止了一个域上的网页访问另一个域的资源，目的是为了安全性。跨域问题通常发生在以下场景： 在一个网站的前端应用程序（如…...

编程日记 2025/7/4 23:57:14

有 SpringBoot 助力，广场舞团解锁花式舞步密码

3 系统分析 3.1 系统可行性分析 3.1.1 经济可行性由于本系统是作为毕业设计系统，且系统本身存在一些技术层面的缺陷，并不能直接用于商业用途，只想要通过该系统的开发提高自身学术水平，不需要特定服务器等额外花费。所有创造及工作…...

编程日记 2025/6/28 8:59:19

【推荐算法】单目标精排模型——FiBiNET

key word: 学术论文 Motivation： 传统的Embedding&MLP算法是通过内积和Hadamard product实现特征交互的，这篇文章的作者提出了采用SENET实现动态学习特征的重要性；作者认为简单的内积和Hadamard product无法有效对稀疏特征进行特征交互&a…...

编程日记 2025/6/28 19:56:54

从零开始学TiDB（3）TiKV 持久化机制

如图，每个TiKV有两个rocksdb实例，rocksdbKV复制存储键值对，rocksdb raft负责存储复制的日志。每个region及其副本构成了raft group。这个OB的Zone其实有点类似，在OB中每个Unit及其副本构成了paxos组，在TiDB中叫raft…...

编程日记 2025/7/3 13:49:15

集合ArrayList

黑马程序员Java的个人笔记 BV17F411T7Ao p111~p115 目录集合存储数据类型的特点创建对象 ArrayList 成员方法 .add 增加元素 .remove 删除元素 .set 修改元素 .get 查询元素 .size 获取长度基本数据类型对应的包装类 Character 练习返回多个数据集合存储…...

编程日记 2025/6/28 18:56:53

后端API接口设计标准（Java）

Controller 层（API接口） 无论是传统的三层架构还是现在的COLA架构，Controller 层依旧有一席之地，说明他的必要性；说它是配角是因为 Controller 层的代码一般是不负责具体的逻辑业务逻辑实现，但是它负责接收…...

编程日记 2025/6/28 19:32:40

Oracle Recovery Tools工具一键解决ORA-00376 ORA-01110故障（文件offline）---惜分飞

客户在win上面迁移数据文件,由于原库非归档,结果导致有两个文件scn不一致,无法打开库,结果他们选择offline文件,然后打开数据库 Wed Dec 04 14:06:04 2024 alter database open Errors in file d:\app\administrator\diag\rdbms\orcl\orcl\trace\orcl_ora_6056.trc: ORA-01113:…...

编程日记 2025/7/1 16:31:58

Python制做一个简易PDF编辑器——关于PDF文字编辑实现的思路

在Python零基础快速入门最后一篇，我们一起做了一个PDF编辑小工具，里面只实现的PDF翻页浏览等，并没有实现PDF的文字在线编辑，是因为在PDF编辑器中实现文字编辑功能是一个相对复杂的过程，因为PDF格式本质上是一个用于呈现…...

编程日记 2025/7/3 12:49:15

RabbitMQ如何保证消息不被重复消费

前言： 正常情况下，消费者在消费消息后，会给消息队列发送一个确认，消息队列接收后就知道消息已经被成功消费了，然后就从队列中删除该消息，也就不会将该消息再发送给其他消费者了。不同消息队列发出的确认消…...

编程日记 2025/7/1 15:15:43

Windows Terminal ssh到linux

1. windows store安装 Windows Terminal 2. 打开json文件配置 {"$help": "https://aka.ms/terminal-documentation","$schema": "https://aka.ms/terminal-profiles-schema","actions": [{"command": {"ac…...

编程日记 2025/7/1 20:34:06

vue实现页面自动滚动，鼠标悬浮暂停，移开继续

1、给div一个id <div class"kb_nei_new_left" id"chartsContainer">2、定义一个自动滚动的方法 autoSroll(Id) {// flag 为true时停止滚动var flag false;// 定时器var timer;function roll() {var h -1;timer setInterval(function () {flag …...

编程日记 2025/7/3 21:31:36

第3章：文本样式 --[CSS零基础入门]

CSS（层叠样式表）允许你以多种方式定制文本的外观。以下是一些常用的文本和字体相关的CSS属性： 1.字体字体系列当然，下面是两个使用不同字体系列的CSS示例。每个示例都展示了如何指定一个字体系列，并提供备用字体以确保在用户的系统中找不到首选字体时仍有合适的字体可…...

编程日记 2025/7/2 13:51:09

从视觉到雷达：多模态感知如何引领自动驾驶安全革命

文章目录摘要引言多模态感知融合的原理与架构感知技术的特点多模态感知融合的目标数据融合实现示例代码结构与主要组件模型定义 MultimodalFusionModel前向传播（forward 方法）模型细节剖析实践应用 QA环节总结参考资料摘要本文探讨了多模态感知技术…...

编程日记 2025/6/30 20:09:42

若依集成更好用的easyexcel

背景若依使用的是apach poi并在此基础上进行封装apach poi的原生的api是很复杂的，若依简化了了此操作apach poi的上传速率和下载速率都是没有优化的，依赖于文件大小的限制在此前提下，如果没法满足客户的需求（超大型文件的上传&am…...

编程日记 2025/7/2 1:23:48

大数据新视界 -- 大数据大厂之 Hive 数据导入：多源数据集成的策略与实战（上）（3/ 30）

💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的…...

编程日记 2025/7/3 1:26:46

线段树模板

单点修改 #include <bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(false),cin.tie(nullptr); #define rep(i, x, y) for(int i(x), _(y);i<_;i) #define rrep(i, x, y) for(int i(x), _(y);i>_;i--) #define all(x) x.begin(),x.end() #d…...

编程日记 2025/7/2 0:48:10

算法刷题Day15: BM37 二叉搜索树的最近公共祖先

题目链接描述给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 1.对于该题的最近的公共祖先定义:对于有根树T的两个节点p、q，最近公共祖先LCA(T,p,q)表示一个节点x，满足x是p和q的祖先且x的深度尽可能大。在这里，一个节点也可以…...

编程日记 2025/7/2 13:15:18

正则表达式去除文本中括号()＜＞[]里的内容

一行文本中包含有各种括号，如()、<>、[]，我们希望把括号及括号内的内容0去除，可以通过正则表达式来实现。匹配() pattern r$[^)]*$ # 匹配()匹配一个左括号(，然后匹配0个或多个不是右括号的任意字符[^)]*&#xff0c…...

编程日记 2025/7/4 11:46:03

Environment Modules安装配置

Environment Modules安装配置 Environment Modules是一款用来管理计算机软件环境的软件，通过简单的命令来控制计算机环境变量。本文接受该软件的安装和配置方法系统： Linux OpenSUSE 15.6 软件版本： modules 5.5 依赖： gcc 7.5…...

编程日记 2025/7/3 23:37:59

constexpr、const和 #define 的比较

constexpr、const 和 #define 的比较一、定义常量 constexpr 定义：constexpr用于定义在编译期可求值的常量表达式。示例：constexpr int x 5;这里，x的值在编译期就确定为5。 const 定义：const表示变量在运行期间不能被修改&…...

编程日记 2025/7/2 22:50:48

STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

一、HAL_UART_Transmit和HAL_UART_Transmit_IT的区别 1. HAL_UART_Transmit_IT（非阻塞模式）： HAL_UART_Transmit_IT 是非阻塞的传输函数，也就是说，当你调用 HAL_UART_Transmit_IT 时，它不会等到数据完全发…...

编程日记 2025/7/1 23:28:39

如何制作“优美”PPT

目录 1.免费PPT模板网站： 2.免费有较好质量的图片网站： 免费图片资源免费透明PNG图片资源： 免费icon图片资源： 3.选择好的图片： 图片底色 4.要与不要千万不要： 一定要： 6.一些建议…...

编程日记 2025/7/3 3:31:49

5G模组AT命令脚本-控制模组进入飞行模式

控制模组进入飞行模式控制模组进入飞行模式控制模组进入飞行模式控制模组进入飞行模式 #!/bin/bash ## 5G模组采用USB3.0与上位机连接，usb接口在上位机上虚拟出多个port,其中一个可用于发送AT命令，控制模组 ## 本脚本控制模组进入飞行模式## flyin …...

编程日记 2025/7/2 16:49:13

计算机网络-Wireshark探索ARP

使用工具 Wiresharkarp: To inspect and clear the cache used by the ARP protocol on your computer.curl(MacOS)ifconfig(MacOS or Linux): to inspect the state of your computer’s network interface.route/netstat: To inspect the routes used by your computer.Brows…...

编程日记 2025/7/1 1:07:45

Vue 2 生命周期函数详解

Vue 2 生命周期函数详解引言 Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。理解 Vue 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 2 的生命周期钩子、每个阶段的作用及其代码示例&…...

编程日记 2025/6/28 19:35:03

Vue的路由实现模式：hash模式和history模式

Vue 路由的两种模式： hash 模式： 类似于住在一个大房子里，你的地址很长，但用一个 “门牌号”（# 后面的部分）来标识你住哪间房间。例如： bash http://example.com/#/home 这就好比 “example.…...

编程日记 2025/7/4 7:15:43

R语言 | 峰峦图 / 山脊图

目的：为展示不同数据分布的差异。 1. ggplot2 实现 # 准备数据 datmtcars[, c("mpg", "cyl")] colnames(dat)c("value", "type") head(dat) # value type #Mazda RX4 21.0 6 #Mazda RX4 Wag …...

编程日记 2025/7/2 17:14:21

Kubernetes(K8s)

头条：参考资料 Kubernetes 入门指南：从基础到实践_kubernetes 从入门到实践-CSDN博客 Kubernetes（k8s）与docker的区别 Docker、Kubernetes之间的区别_docker和kubernetes区别-CSDN博客 Docker部署SpringBoot项目（镜…...

编程日记 2025/7/1 12:50:34

【代码随想录|贪心算法05】

56.合并区间题目链接56. 合并区间 - 力扣（LeetCode） 这道题思路跟前两道也很像，就是更新把相同的区间合并而已。 class Solution { public: static bool cmp(const vector<int>& a,const vector<int>& b){return a[0…...

编程日记 2025/7/1 20:17:58

QQ聊天室--C++基础项目--QT+Socket网络编程

目录一、项目概述二、项目成果 1、QQ基础界面展示： 2、群聊界面展示： 3、聊天功能展示三、项目代码 1、登录头文件（denglu.h） 2、登录源文件（denglu.cpp） 3、聊天界面头文件（widget.…...

编程日记 2025/7/2 1:20:10

分布式搜索引擎之elasticsearch基本使用2

分布式搜索引擎之elasticsearch基本使用2 在分布式搜索引擎之elasticsearch基本使用1中，我们已经导入了大量数据到elasticsearch中，实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。所以j接下来，我们研究下…...

编程日记 2025/7/4 8:02:55

今日商协丨商协会在“双循环”新发展格局中的作用

在当今全球经济环境中，世界格局正在经历深刻变化，中国正在全面构建“双循环”新发展格局，以实现更高质量、更可持续的发展。在这一过程中，商协会发挥着不可或缺的作用。商协会在国内大循环中扮演促进者的角色，不仅活…...

编程日记 2025/7/2 13:39:57

前端项目安装node-sass

这个依赖比较难装，因为这个依赖需要安装的版本是和node版本绑定的，所以你需要去sass的官网找到对应关系，下面是我的版本信息： node 16.14.2 node-sass:^6.0.1 sass-loader:^10.2.0 "sass": "^1.82.0", 你…...

编程日记 2025/7/3 6:43:11

算法-字符串-678.有效的括号字符串

一、题目二、思路解析 1.思路： 用leftMin变量来记录存在的“（”， 用leftMax变量记录字符串中最多的“（” 2.常用方法： 无 3.核心逻辑： 1.遍历字符串： a.当前字符为"("，le…...

编程日记 2025/6/30 13:00:10

linux 压缩文件为zip

在 Linux 系统中，可以使用 zip 命令来压缩文件或目录打开终端（Terminal）。使用 cd 命令导航到要压缩的文件或目录所在的路径。运行以下命令来压缩文件或目录： 压缩单个文件： zip output.zip file.txt这里&#xf…...

编程日记 2025/7/2 20:13:43

Cisco Packet Tracer | Cisco Packet Tracer - VLAN 实验 - 交换机的 VLAN 划分

关注这个工具的其它相关笔记：Cisco Packet Tracer —— 使用教程合集-CSDN博客 0x01：VLAN 划分 - 单个交换机 0x0101：拓扑搭建流程从软件底部拖出一台交换机（笔者选择的型号是 2960 IOS15）： 然后再拖出四…...

编程日记 2025/7/2 21:46:05

《计算机网络》（408大题）

2009 路由转发和静态路由的计算子网划分、路由聚合的计算注：CIDR中的子网号可以全为0或1，但是其主机号不允许。注： 这里其实是把到互联网的路由当做了一个默认路由（当一个目的网络地址与路由表中其他都不匹配时，…...

编程日记 2025/7/4 0:07:54

二叉树概述

目录一、二叉树的基本结构二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…...

编程日记 2025/7/3 7:42:27

qiankun学习记录

什么是微前端微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以…...

编程日记 2025/6/30 16:13:26

【C++ 20进阶（2）：初始化 Initializer

【C 20进阶（2）：初始化 Initializer】原文：https://blog.csdn.net/weixin_44259356/article/details/144377955 引言本篇文章为系列文章将着重介绍C20新特性，一是希望可以和大家交流分享，二是也便于自己…...

编程日记 2025/7/3 8:46:10

vue3学习——事件监听（v-on）

我们可以使用 v-on 指令监听 DOM 事件： <button v-on:click"increment">{{ count }}</button> 因为其经常使用，v-on 也有一个简写语法： <button click"increment">{{ count }}</button> 此处…...

编程日记 2025/7/4 11:53:42

java全栈day13-后端Web实战2

接上述查询部门实现，完成后续要求一、统一响应结果 1.1步骤资料如下对一开始的代码修改如下结果如下 1.2测试指定请求方式结果小结二、前后端联调测试资料如下： (不行，一定要不带空格和不带中文，要不然启动不了试了半天…...

编程日记 2025/7/2 10:14:33

C++/CX，一个智能的 C++/Windows 平台开发库！

以下是一篇关于C/CX的C学习文章： 开篇嘿，大家好呀！我是一行。今天咱们来一起探索一个超棒的C开发库——C/CX，它可是在Windows平台开发中非常智能且强大的工具哦，能让我们的开发变得更加高效便捷。让我们一起开启今天的…...

编程日记 2025/6/29 14:00:32

分布式分布式事务总结

前言相关系列《分布式 & 目录》《分布式 & 分布式事务 & 总结》《分布式 & 分布式事务 & 问题》分布式事务所谓分布式事务是指操作范围笼罩多个不同节点的事务。例如对于订单节点&库存节点而言，一次完整的交易需要同时调动两个节…...

编程日记 2025/7/3 10:37:59

数据结构（3）单链表的模拟实现

上一节我们进行了数据结构中的顺序表的模拟式现，今天我们来实现一下另外一个数据结构：单链表。我们在实现顺序表之后一定会引发一些问题和思考： 1.顺序表在头部和中间插入数据会用到循环，时间复杂O（N） …...

编程日记 2025/7/2 6:33:35

HBU深度学习实验14.5-循环神经网络（1.5）

梯度爆炸实验造成简单循环网络较难建模长程依赖问题的原因有两个：梯度爆炸和梯度消失。一般来讲，循环网络的梯度爆炸问题比较容易解决，一般通过权重衰减或梯度截断可以较好地来避免；对于梯度消失问题，更加有效的方式…...

编程日记 2025/7/1 13:44:36

Redis01

springbootredis 特点 1.高效性 2.支持多种数据结构 String,list,set,hash.zset 3.稳定性：持久化，主从复制（集群） 4.其他特性：支持过期时间，支持事务，消息订阅。安装 1.下载安装包 redis官…...

编程日记 2025/7/4 10:21:24

数据库中decimal、float 和 double区别

在计算机科学中，decimal、float 和 double 是用于表示和处理数值的不同数据类型。 - decimal 是一种精确的十进制浮点数表示，通常用于需要高精度计算的场景，比如财务应用。它能够精确表示小数，并且不会出现浮点数运算误差。 - flo…...

编程日记 2025/7/3 23:15:16

HDR视频技术之五：HDR生产流程

在介绍 HDR 的生产流程之前，我们先介绍下视频制作与传输的一些基本知识。内容类型： 直播内容（ live content） ——所谓的直播内容即没有后处理过程以及创作者意图。分发给用户的信息是实时产生并且实时制作并派发的。常见的应用…...

编程日记 2025/7/2 15:19:53

CTFshow-爆破(Web21-28)

CTFshow-爆破(Web21-28) Web21 抓包选则dic.zip里的字典爆破，记得添加前缀admin: 答案admin:shark63 burp里有一个自定义迭代器，可以设置前几部分，很好用 Web22 题目失效了直接看wp吧 360quake 使用空间搜索引擎—>360quake 搜索语法…...

编程日记 2025/7/3 8:45:06