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

常用的跨域方案有哪些？

news 来源：原创 2025/6/9 17:11:08

在前端开发中，跨域（Cross-Origin）是一个常见问题，通常是由于浏览器的同源策略（Same-Origin Policy）限制导致的。为了解决跨域问题，前端开发者可以采用多种方案。

1. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是浏览器支持的一种跨域解决方案，允许服务器声明哪些源可以访问资源。

服务器在响应头中添加 Access-Control-Allow-Origin 字段，指定允许访问的源。
对于复杂请求（如 PUT、DELETE 或带有自定义头的请求），浏览器会先发送一个 OPTIONS 预检请求。

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

优点

浏览器原生支持，无需额外配置。
安全性高，服务器可以精确控制允许访问的源。

缺点

需要服务器端支持。
对于复杂请求，会增加一次 OPTIONS 预检请求。

2. 代理服务器

通过代理服务器转发请求，绕过浏览器的同源策略。

前端请求同源的代理服务器，代理服务器将请求转发到目标服务器。
目标服务器返回响应后，代理服务器再将响应返回给前端。

Nginx 配置：

location /api/ {proxy_pass https://target-server.com/;
}

Node.js 实现：

const express = require('express');
const axios = require('axios');const app = express();app.use('/api', async (req, res) => {const response = await axios.get(`https://target-server.com${req.url}`);res.json(response.data);
});app.listen(3000, () => {console.log('Proxy server is running on port 3000');
});

优点

前端无需修改代码。
支持所有 HTTP 方法。

缺点

需要额外的服务器资源。
增加了系统的复杂性。

3. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签不受同源策略限制的特性实现的跨域方案。

实现方式

前端动态创建一个 <script> 标签，src 指向目标服务器的 API，并传递一个回调函数名。
服务器返回一段 JavaScript 代码，调用前端定义的回调函数。

// 前端代码
function handleResponse(data) {console.log(data);
}const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);// 服务器返回
handleResponse({ name: 'John', age: 30 });

优点

兼容性好，支持老版本浏览器。
无需服务器端额外配置。

缺点

只支持 GET 请求。
安全性较低，容易受到 XSS 攻击。

4. WebSocket

WebSocket 是一种全双工通信协议，不受同源策略限制。

前端和后端通过 WebSocket 建立连接，进行双向通信。

// 前端代码
const socket = new WebSocket('wss://example.com');socket.onmessage = (event) => {console.log('Received:', event.data);
};socket.send('Hello Server');// 服务器代码（Node.js + ws 库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {ws.on('message', (message) => {console.log('Received:', message);ws.send('Hello Client');});
});

优点

实时性强，适合实时通信场景。
不受同源策略限制。

缺点

需要服务器端支持 WebSocket。
不适合传统的 HTTP 请求场景。

5. postMessage

postMessage 是 HTML5 提供的一种跨文档通信机制，可以在不同源的窗口之间传递消息。

使用 window.postMessage 发送消息，目标窗口通过 message 事件接收消息。

// 发送消息
const targetWindow = window.open('https://example.com');
targetWindow.postMessage('Hello', 'https://example.com');// 接收消息
window.addEventListener('message', (event) => {if (event.origin === 'https://example.com') {console.log('Received:', event.data);}
});

优点

支持跨域窗口通信。
安全性高，可以指定目标源。

缺点

只适用于窗口间的通信。
需要目标窗口配合。

总结

方案	适用场景	优点	缺点
CORS	前后端分离项目	浏览器原生支持，安全性高（推荐）	需要服务器端支持
JSONP	老版本浏览器兼容	兼容性好，无需服务器端配置（不推荐）	只支持 GET 请求，安全性低
代理服务器	前后端分离项目	前端无需修改代码，支持所有 HTTP 方法（推荐）	需要额外服务器资源
WebSocket	实时通信场景	实时性强，不受同源策略限制	需要服务器端支持
postMessage	跨窗口通信	支持跨域窗口通信，安全性高	只适用于窗口间通信

根据具体场景选择合适的跨域方案，可以有效解决浏览器的同源策略限制问题。

常用的跨域方案有哪些？

在前端开发中，跨域（Cross-Origin）是一个常见问题，通常是由于浏览器的同源策略（Same-Origin Policy）限制导致的。为了解决跨域问题，前端开发者可以采用多种方案。 1. CORS（跨域资源共…...

编程日记 2025/6/3 5:07:26

JS通过ASCII码值实现随机字符串的生成（可指定长度以及解决首位不出现数值）

在之前写过一篇“JS实现随机生成字符串（可指定长度）”，当时写的过于简单和传统，比较粗放。此次针对此问题，对随机生成字符串的功能进行优化处理，对随机取到的字符都通过程序自动来完成。在写之前&#xff…...

编程日记 2025/6/3 1:59:59

IoTDB 1.2 升级 1.3 后 Pipe 插件失效

问题现象客户使用 Pipe 功能将数据从 IoTDB 系统传输至 Kafka 集群，以便进行后续的数据处理与分析。在从企业版 1.2.5 升级至企业版 1.3.3.6 后，客户反馈 Kafka 的 consumer 无法接收到数据。经检查日志，发现存在以下报错： 问题…...

编程日记 2025/6/3 5:07:17

基于STM32的智能门锁安防系统（开源）

目录项目演示项目概述硬件组成： 功能实现 1. 开锁模式 1.1 按键密码开锁 1.2 门禁卡开锁 1.3 指纹开锁 2. 功能备注 3. 硬件模块工作流程 3.1 步进电机控制 3.2 蜂鸣器提示 3.3 OLED显示 3.4 指纹与卡片管理项目源代码分析 1. 主程序流程 (main…...

编程日记 2025/6/3 16:02:10

浅谈云端编辑器，分析其亮点与不足

浅谈云端编辑器，分析其亮点与不足这个云端编辑器界面可以分为左侧题目筛选栏、中间题目描述与代码编辑区域、右侧AI提示功能三部分。以下是详细的分析： 1. 左侧题目筛选栏层次结构清晰：左侧栏展示了一个层级结构，题目按主题分…...

编程日记 2025/6/3 16:02:57

Python字符串引号的嵌套问题

目录 1、使用不同类型的引号 2、使用转义字符 3、使用三重引号 4、嵌套三重引号 5、注意事项在Python中，字符串可以使用单引号 () 或双引号 (") 来定义，但是如果我们要定义的字符串内也包含引号，字符串界定符的不正确使用会导致语法…...

编程日记 2025/6/3 16:03:13

latex如何让目录后面有点

使用前效果在导言区引入以下代码 \usepackage[subfigure]{tocloft} \usepackage{subfigure} % 设置目录中 section 条目前导符号为连续点 \renewcommand{\cftsecleader}{\cftdotfill{\cftdotsep}}编译后的效果...

编程日记 2025/6/3 16:01:38

【力扣系列题目】不同路径组合总和最大连续1个数打家劫舍{持续更新中...}

文章目录不同路径不同路径[不同路径 II](https://leetcode.cn/problems/unique-paths-ii/)[不同路径 III](https://leetcode.cn/problems/unique-paths-iii/) 组合总和组合总和【无重复数字无限制选择次数】[组合总和 II](https://leetcode.cn/problems/combination-sum-ii/)…...

编程日记 2025/6/2 18:14:45

方法建议ChatGPT提示词分享

方法建议 ChatGPT能够根据您的具体需求提供针对性的建议，帮助您选择最合适的研究方法。通过清晰的提示，ChatGPT可以精准地为您提供最契合的研究方案。此外，它还能协助您将这些方法灵活地应用于新的研究环境，提出创新的技术解决方案…...

编程日记 2025/6/3 16:01:22

Cursor的详细使用指南

以下是一份关于 Cursor 的详细使用指南： 一、安装与设置下载与安装： 首先，访问 Cursor 的官方网站，根据你的操作系统（Windows、Mac 或 Linux）下载相应的安装程序。运行安装程序，按照屏幕上的提…...

编程日记 2025/6/3 16:01:54

Python----Python高级（正则表达式：语法规则，re库）

一、正则表达式 1.1、概念正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、 regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母&#xff0…...

编程日记 2025/6/3 12:20:58

电脑如何访问手机文件？

手机和电脑已经深深融入了我们的日常生活，无时无刻不在为我们提供服务。除了电脑远程操控电脑外，我们还可以在电脑上轻松地访问Android或iPhone手机上的文件。那么，如何使用电脑远程访问手机上的文件呢？ 如何使用电脑访问手机文件…...

编程日记 2025/6/3 12:19:39

计算最接近的数

计算最接近的数真题目录: 点击去查看 E B卷 100分题型题目描述给定一个数组X和正整数K，请找出使表达式： X[i] - X[i 1] - … - X[i K - 1] 结果最接近于数组中位数的下标 i ，如果有多个 i 满足条件，请返回最大的 i. 其中&…...

编程日记 2025/6/3 10:02:02

Ubuntu离线docker compose安装DataEase 2.10.4版本笔记

1、先准备一个可以正常上网的相同版本的Ubuntu系统，可以使用虚拟机。Ubuntu系统需要安装好docker compose或docker-compose 2、下载dataease-online-installer-v2.10.4-ce.tar在线安装包，解压并执行install.sh进行安装和启动 3、导出docker镜像 sudo d…...

编程日记 2025/6/3 12:20:43

C#使用WMI获取控制面板中安装的所有程序列表

C#使用WMI获取控制面板中安装的所有程序列表 WMI 全称Windows Management Instrumentation,Windows Management Instrumentation是Windows中用于提供共同的界面和对象模式以便访问有关操作系统、设备、应用程序和服务的管理信息。如果此服务被终止，多数基于 Windo…...

编程日记 2025/6/3 12:21:30

WPF2-1在xaml为对象的属性赋值.md

1. AttributeValue方式 1.1. 简单属性赋值1.2. 对象属性赋值 2. 属性标签的方式给属性赋值3. 标签扩展 (Markup Extensions) 3.1. StaticResource3.2. Binding 3.2.1. 普通 Binding3.2.2. ElementName Binding3.2.3. RelativeSource Binding3.2.4. StaticResource Binding (带参…...

编程日记 2025/6/3 22:26:08

社区版Dify实现文生视频 LLM+ComfyUI+混元视频

社区版Dify实现文生视频 LLMComfyUI混元视频一、社区版Dify实现私有化混元视频效果二、为什么社区版Dify可以在对话框实现文生视频？LLMComfyUI混元视频实现流程图（重点）1. 文生视频模型支持ComfyUI2. ComfyUI可以轻松导出API实现封装3. Di…...

编程日记 2025/6/3 12:20:11

QT调用OpenSceneGraph

OSG和osgQt编译教程，实测通过一、下载OpenSceneGraph OpenSceneGraphhttps://github.com/openscenegraph/OpenSceneGraph 二、使用CMAKE编译OpenSceneGraph 1.打开cmake，配置源代码目录 2. CMAKE_INSTALL_PREFIX设置为install文件夹，生…...

编程日记 2025/6/3 12:21:14

Qt基础项目篇——Qt版Word字处理软件

一、核心功能本软件为多文档型程序，界面是标准的 Windows 主从窗口拥有：主菜单、工具栏、文档显示区和状态栏。所要实现的东西，均在下图了。开发该软件，主要分为下面三个阶段 1）界面设计开发多窗口 MDI 程序…...

编程日记 2025/6/3 12:19:55

【Postgres_Python】使用python脚本批量创建和导入多个PG数据库

之前批量创建和导入数据库分为2个python脚本进行，现整合优化代码合并为一个python脚本，可同步实现数据库的创建和数据导入。之前的文章链接： 【Postgres_Python】使用python脚本批量创建PG数据库【Postgres_Python】使用python脚本将多个.S…...

编程日记 2025/6/4 17:21:31

消息队列篇--原理篇--RabbitMQ和Kafka对比分析

RabbitMQ和Kafka是两种非常流行的消息队列系统，但它们的设计哲学、架构特点和适用场景存在显著差异。对比如下。 1、架构设计 RabbitMQ： 基AMQP协议：RabbitMQ是基于AMQP（高级消息队列协议）构建的，支持多…...

编程日记 2025/6/4 3:22:19

俄语画外音的特点

随着全球媒体消费的增加，语音服务呈指数级增长。作为视听翻译和本地化的一个关键方面，画外音在确保来自不同语言和文化背景的观众能够以一种真实和可访问的方式参与内容方面发挥着重要作用。说到俄语，画外音有其独特的特点、挑战和复杂性&…...

编程日记 2025/6/4 3:22:03

【机器学习实战中阶】音乐流派分类-自动化分类不同音乐风格

音乐流派分类 – 自动化分类不同音乐风格在本教程中，我们将开发一个深度学习项目，用于自动化地从音频文件中分类不同的音乐流派。我们将使用音频文件的频率域和时间域低级特征来分类这些音频文件。对于这个项目，我们需要一个具有相似大小和相似频率范围的音频曲目数据集…...

编程日记 2025/6/4 3:23:22

Keil5 IDE使用笔记

1 Keil生成bin文件 $K\ARM\ARMCLANG\bin\fromelf.exe --bin --outputL/L.bin !L $K: 表示 Keil 5的安装路径 L: 表示工程名 !L: 表示工程名.arf 后缀的文件可根据实际需要修改 --output 的值调整生成的bin文件的存放路径。 2 下载程序报错 No ST-LINK detected Error: Fla…...

编程日记 2025/6/2 1:10:34

自动化办公|使用Python重命名并移动文件到对应文件夹

在日常的文件管理和处理过程中，我们可能会遇到需要将文件整理到不同文件夹中的需求。例如，我们有一个包含多个文件的目录，文件名的首字符表示文件应该存放在哪个文件夹中。我们可以使用Python脚本来自动完成这个任务，实现文件的分…...

编程日记 2025/6/3 20:54:53

【全栈】SprintBoot+vue3迷你商城（5）

【全栈】SprintBootvue3迷你商城（5） 上一期我们基本完成了与用户相关的接口，而这些接口都是用户才能干的事情，如果你没登录，那么这些接口功能你都不能实现。那么如何做到这一步呢？ 1.Token 作用身份…...

编程日记 2025/6/2 13:10:37

Java 并发编程：Java 中的乐观锁与 CAS

大家好，我是栗筝i，这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 025 篇文章，在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验，并希望进一步完善自己对整个 Java 技术体系来充实自…...

编程日记 2025/6/4 3:22:51

模拟飞行入坑（五） P3D 多通道视角配置 viewgroup

背景： P3D进行多个屏幕显示的时候，如果使用英伟达自带的屏幕融合成一个屏，或者使用P3D单独拉伸窗口，会使得P3D的画面被整体拉伸，又或者,当使用Multichannel进行多个设备联动时，视角同步组合需要配置&#…...

编程日记 2025/6/3 20:12:34

react中hooks之 React 19 新 Hooks useActionState useFormStatus用法总结

React 19 新 Hooks 使用指南: useActionState & useFormStatus 目录 useActionStateuseFormStatus最佳实践 useActionState 概述 useActionState 是 React 19 引入的新 Hook，用于处理表单 action 的状态更新。它允许你基于表单 action 的结果来更新组件状态…...

编程日记 2025/6/4 3:22:35

为AI聊天工具添加一个知识系统之48 蒙板程序设计（第二版）：Respect九宫格【社会形态：治理】

本文要点 1、词汇表Vocabulary （普通名词） 1) 三组词（数据库支持的三个数字散列）： 工作，工件，工具。论题，主题词，关键字。口号，符号，编号。 2…...

编程日记 2025/6/2 14:22:28

靠右行驶数学建模分析（2014MCM美赛A题）

笔记题目要求分析： 比较规则的性能，分为light和heavy两种情况，性能指的是 a.流量与安全 b. 速度限制等分析左侧驾驶分析智能系统论文参考论文两类规则分析靠右行驶（第一条）2. 无限制（去掉了第一条…...

编程日记 2025/6/2 18:30:08

6.5、密集波分复用系统(DWDM)/OTN

图中从左到右分为多个部分，分别代表了信号的输入、传输和输出过程。左侧是客户侧，有普通接口和彩色接口，分别连接到光转发单元（OTU）。中间部分是传输线路，包含多个光放大器（OBA、OLA、OPA&…...

编程日记 2025/6/2 23:17:09

Unity3D基于Unity整合BEPUphysicsint物理引擎实战详解

引言 Unity3D是一款流行的游戏引擎，提供了丰富的功能和工具，使开发者能够轻松创建各种类型的游戏。其中，帧同步技术是游戏开发中至关重要的一环，它能确保多个玩家在同一时间内看到的游戏状态是一致的。BEPUphysicsint是一个基于U…...

编程日记 2025/6/2 23:18:28

《探秘鸿蒙Next：如何保障AI模型轻量化后多设备协同功能一致》

在鸿蒙Next的多设备协同场景中，确保人工智能模型轻量化后功能的一致性是一项极具挑战性但又至关重要的任务。以下是一些关键的方法和策略。统一的模型架构与标准采用标准化框架：选择如TensorFlow Lite、PyTorch Mobile等在鸿蒙Next上适配良好的轻量化…...

编程日记 2025/6/4 6:46:34

微服务知识——4大主流微服务架构方案

文章目录 1、微服务聚合模式2、微服务共享模式3、微服务代理模式4、微服务异步消息模式微服务是大型架构的必经之路，也是大厂重点考察对象，下面我就重点详解4大主流微服务架构方案。 1、微服务聚合模式微服务聚合设计模式，解决了如何从多个…...

编程日记 2025/6/2 23:18:13

Java 方法重写

目录一、什么是方法重写，为什么需要它二、方法重写的规则三、方法重写的实际应用场景四、方法重写与重载的区别五、总结在 Java 编程的精彩世界里，方法重写是一项极为重要且实用的特性，它犹如一把神奇的钥匙，为我们开启…...

编程日记 2025/6/2 7:19:26

华为E9000刀箱服务器监控指标解读

美信监控易内置了数千种常见设备监测器，能够监测超过20万项指标。这些指标涵盖了从硬件设备到软件系统，从网络性能到安全状态等各个方面。如下基于美信监控易——IT基础监控模块，对华为E9000刀箱服务器部分监控指标进行解读。一、华为E9000…...

编程日记 2025/6/3 5:24:56

正则表达式基础与应用

什么是正则表达式？ 正则表达式（Regular Expression，简称regex）是一种用于描述字符串结构的语法规则。它定义了一个搜索模式，可以用来匹配、替换或提取文本中的子串。正则表达式广泛应用于文本处理、数据验证、查找和替…...

编程日记 2025/5/30 3:14:56

微信小程序使用上拉加载onReachBottom。页面拖不动。一直无法触发上拉的事件。

1，可能是原因是你使用了scroll-view的标签，用onReachBottom触发加载事件。这两个是有冲突的。没办法一起使用。如果页面的样式是滚动的是无法去触发页面的onReachBottom的函数的。因此，你使用overflow:auto.来使用页面的某些元素滚动&#xf…...

编程日记 2025/5/29 5:16:45

9. 神经网络（一.神经元模型）

首先，先看一个简化的生物神经元结构： 生物神经元有多种类型，内部也有复杂的结构，但是可以把单个神经元简化为3部分组成： 树突：一个神经元往往有多个树突，用于接收传入的信息。轴突：…...

编程日记 2025/6/2 10:23:18

Mysql安装，mysql-installer-community-8.0.41.0

“windowR"键弹出运行框，输入”cmd"进入window命令提示符，输入“mysql -uroot -p"按下回车，再输入密码，按下回车，出现下面界面则是配置成功。默认会在 C:\Program Files\MySQL\MySQL Server 8.0\bin …...

编程日记 2025/6/2 12:02:50

吴恩达深度学习——神经网络介绍

文章内容来自BV11H4y1F7uH，仅为个人学习所用。文章目录什么是神经网络引入神经网络神经元激活函数ReLU隐藏单元用神经网络进行监督学习监督学习与无监督学习举例什么是神经网络引入已经有六个房子的数据集，横轴为房子大小，纵轴为房子…...

编程日记 2025/5/30 4:58:25

【SpringBoot】SpringBoot中分页插件（PageHelper）的使用

目录 1.分页概念 2.原生写法 3.PageHelper插件分页查询 3.1 介绍 3.2?使用 3.3 Page对象和PageInf对象 1.分页概念用户查询的数据不可能一次性全部展示给用户（如果用户有一万条数据呢），而是分页展示给用户，这就是分页查询…...

编程日记 2025/6/3 16:49:57

JavaScript DOM 操作与事件处理

Hi，我是布兰妮甜 ！在现代Web开发中，JavaScript不仅是用来增强用户体验的工具，它更是创建动态、交互式网页的关键。通过操作文档对象模型（DOM）和处理用户事件，开发者能够构建出响应迅速且功能丰富…...

编程日记 2025/6/4 5:34:45

rstrip 方法是 Python 字符串的一个内置方法，用于删除字符串右边（末尾）的指定字符

rstrip 方法是 Python 字符串的一个内置方法，用于删除字符串右边（末尾）的指定字符。语法： string.rstrip([chars])string：原始字符串。chars：可选参数，指定要删除的字符。默认为 None&#…...

编程日记 2025/6/3 16:49:35

【Elasticsearch】腾讯云安装Elasticsearch

Elasticsearch 认识Elasticsearch安装Elasticsearch安装Kibana安装IK分词器分词器的作用是什么？IK分词器有几种模式？IK分词器如何拓展词条？如何停用词条？ 认识Elasticsearch Elasticsearch的官方网站如下 Elasticsearch官网 Ela…...

编程日记 2025/6/4 1:49:40

rsync结合inotify实现文件实时同步

rsync 1.复制工具本地复制远程复制 cp dd 跨主机传递文件 rz sz ftp scp rsync nfs samba drdb 2.rsync作用实现文件的备份，可以是当前主机，也可以是远程主机；可以完全备份，也可以是增量备份 2.1功能类似于cp的复制功能…...

编程日记 2025/6/1 7:14:53

浅谈 PID 控制算法

PID 控制算法概念在我们的生活中可能大家都没有听说过 PID 控制算法，但它可以说是无处不在，小到空调的温度控制、无人机的精准悬停、机器人运作系统，大到飞机和火箭的飞行姿态控制都有 PID 的身影。 PID 控制算法，即比例 - 积分…...

编程日记 2025/6/3 5:18:55

react中hooks之useId用法总结以及与useRef用法区别

React useId Hook 使用指南概述 useId 是 React 18 引入的新 Hook，用于生成唯一的 ID，主要用于可访问性（accessibility）属性。它在服务端和客户端渲染时都能保持一致性。 useId vs useRef useId: 生成稳定的唯一标识符&#…...

编程日记 2025/6/1 0:29:54

Spring Boot AOP实现动态数据脱敏

依赖&配置  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>/*** Author: 说淑人* Date: 2025/1/18 23:03* Desc…...

编程日记 2025/6/4 8:02:00