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

解决跨域请求的问题（CORS）

news 来源：原创 2025/8/30 16:50:26

解决跨域请求问题的方法

1. 服务器端配置响应头

2. JSONP（JSON with Padding）

3. 代理服务器

场景示例

前端代码（使用 Fetch API）

后端代码（使用 Node.js + Express 并设置 CORS 响应头）

跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种现代浏览器为了安全而实施的同源策略所引发的问题。同源策略要求浏览器在访问不同源（协议、域名、端口三者任意一个不同即为不同源）的资源时进行限制。以下详细介绍解决跨域请求问题（CORS）的方法。

解决跨域请求问题的方法

1. 服务器端配置响应头

这是解决 CORS 问题最常见和推荐的方法，通过在服务器端设置响应头来允许跨域请求。

原理：服务器通过设置特定的响应头，告诉浏览器哪些源可以访问该资源，以及允许的请求方法、请求头和是否允许携带凭证等信息。

示例代码（以 Node.js + 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, Authorization'); // 允许的请求头next();
});// 处理 GET 请求
app.get('/api/data', (req, res) => {res.json({ message: 'This is some data from the server.' });
});const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

解释：

Access-Control-Allow-Origin：指定允许访问该资源的源。* 表示允许所有源访问，但在生产环境中，为了安全起见，建议指定具体的源。
Access-Control-Allow-Methods：指定允许的请求方法。
Access-Control-Allow-Headers：指定允许的请求头。

2. JSONP（JSON with Padding）

JSONP 是一种古老的跨域数据交互技术，它利用了 <script> 标签的 src 属性不受同源策略限制的特点。

原理：服务器返回的数据被包裹在一个回调函数中，前端页面通过动态创建 <script> 标签来请求该数据，当请求完成后，会执行回调函数并将数据传递给它。

示例代码：
前端代码：

<!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(data);}const script = document.createElement('script');script.src = 'http://example.com/api/data?callback=handleData';document.body.appendChild(script);</script>
</body>
</html>

服务器端代码（以 Node.js 为例）：

const http = require('http');const server = http.createServer((req, res) => {const url = new URL(req.url, `http://${req.headers.host}`);const callback = url.searchParams.get('callback');const data = { message: 'This is some data from the server.' };const jsonp = `${callback}(${JSON.stringify(data)})`;res.writeHead(200, { 'Content-Type': 'application/javascript' });res.end(jsonp);
});const port = 3000;
server.listen(port, () => {console.log(`Server is running on port ${port}`);
});

局限性：JSONP 只支持 GET 请求，并且安全性较低，容易受到 XSS 攻击。

3. 代理服务器

在开发环境中，可以使用代理服务器来解决跨域问题。代理服务器位于客户端和目标服务器之间，客户端向代理服务器发送请求，代理服务器再将请求转发到目标服务器，并将响应返回给客户端。

示例代码（以 Vue CLI 为例）：
在 vue.config.js 中配置代理：

module.exports = {devServer: {proxy: {'/api': {target: 'http://example.com', // 目标服务器地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
};

解释：

target：目标服务器的地址。
changeOrigin：是否改变请求的源。
pathRewrite：对请求路径进行重写。

场景示例

假设你有一个前端项目运行在 http://localhost:8080，后端 API 服务运行在 http://localhost:3000，你想从前端项目中请求后端 API 的数据。

前端代码（使用 Fetch API）

fetch('http://localhost:3000/api/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

后端代码（使用 Node.js + Express 并设置 CORS 响应头）

const express = require('express');
const app = express();app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');next();
});app.get('/api/data', (req, res) => {res.json({ message: 'This is some data from the server.' });
});const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

通过以上配置，前端项目就可以正常请求后端 API 的数据，解决了跨域问题。

解决跨域请求的问题（CORS）

目录解决跨域请求问题的方法 1. 服务器端配置响应头 2. JSONP（JSON with Padding） 3. 代理服务器场景示例前端代码（使用 Fetch API） 后端代码（使用 Node.js Express 并设置 CORS 响应头） 跨域资…...

编程日记 2025/8/30 16:50:26

未来经济范式争夺战：AR眼镜为何成为下一代交互终端的制高点？

未来经济范式争夺战：AR眼镜为何成为下一代交互终端的制高点？ 在蒸汽机轰鸣的工业革命时代，煤炭、铁路、电报构建了第一个现代经济范式；互联网时代，电力、光纤、物流网络重构了全球经济版图。当前，我们正站…...

编程日记 2025/8/30 16:48:19

无论安装啥工具、首先认准了就是官网。Nginx Nginx官网下载安装包 Windows下载： http://nginx.org/download/nginx-1.26.3.zipLinxu下载 wget http://nginx.org/download/nginx-1.26.3.tar.gzLinux安装Nginx-1.26.3 安装之前先安装Nginx依赖包、自行选择 yum -y i…...

编程日记 2025/8/24 19:26:39

基于opencv消除图片马赛克

以下是一个基于Python的图片马赛克消除函数实现，结合了图像处理和深度学习方法。由于马赛克消除涉及复杂的图像重建任务，建议根据实际需求选择合适的方法： import cv2 import numpy as np from PIL import Imagedef remove_mosaic(image_pat…...

编程日记 2025/8/24 14:34:51

MongoDB Compass中MONGOSH常用查询整理

MongoDB Compass中MONGOSH常用查询整理选择数据库基本的查找指令find() 方法findOne() 方法高级查询条件比较操作符逻辑操作符投影操作排序操作限制和跳过操作limit() 方法skip() 方法正则表达式查询数组查询 MongoDB Compass 是一款可视化的 MongoDB 数据库管理工具&#x…...

编程日记 2025/8/27 10:08:50

SSM笔记

一、获取对象 Scop 单例在容器启动时就直接创建，如果不希望这样，那就使用Lazy懒加载，只能在单例模式下 3、4不常用 FactoryBean创建对象创建对象比较复杂时，可以实现创建一个类实现FactoryBean，实现3个方法来创建…...

编程日记 2025/8/29 8:58:49

5G学习笔记之BWP

我们只会经历一种人生，我们选择的人生。参考：《5G NR标准》、《5G无线系统指南:如微见著，赋能数字化时代》目录 1. 概述2. BWP频域位置3. 初始与专用BWP4. 默认BWP5. 切换BWP 1. 概述在LTE的设计中，默认所有终端均能处理最大2…...

编程日记 2025/8/29 10:15:01

MongoDB Chunks核心概念与机制

1. 基础定义‌ ‌Chunk（块）‌：MongoDB分片集群中数据的逻辑存储单元，由一组连续的片键（Shard Key）范围数据组成，默认大小为‌64MB‌（可调整范围为1-1024MB）‌。‌数据分…...

编程日记 2025/8/26 20:58:17

el-table 手动选择展示列

需求： 由于表格的列过多,用滚动条进行滚动对比数据不方便，所以提出，手动选择展示列实现思路： 表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；点击设置按钮图标(表格右上角&#xff0…...

编程日记 2025/8/27 0:55:17

Netty笔记3：NIO编程

Netty笔记1：线程模型 Netty笔记2：零拷贝 Netty笔记3：NIO编程 Netty笔记4：Epoll Netty笔记5：Netty开发实例 Netty笔记6：Netty组件 Netty笔记7：ChannelPromise通知处理 Netty笔记8&#xf…...

编程日记 2025/8/23 2:15:07

LeetCode Hot 100

1.两数之和暴力解法:时间/空间复杂度 O(N)，O(1) class Solution {public int[] twoSum(int[] nums, int target) {for(int i0;i<nums.length;i){for(int ji1;j<nums.length;j){if(nums[i] nums[j] target){return new int[]{i,j};}}}return new int[0];}…...

编程日记 2025/8/30 14:30:54

Vue.js 学习笔记

文章目录前言一、Vue.js 基础概念1.1 Vue.js 简介1.2 Vue.js 的特点1.3 Vue.js 基础示例二、Vue.js 常用指令2.1 双向数据绑定（v-model）2.2 条件渲染（v-if 和 v-show）2.3 列表渲染（v-for）2.4 事件处理&am…...

编程日记 2025/8/26 1:38:24

MySQL表连接详解

MySQL表连接详解在 MySQL 中，表连接（Join）用于将多个表中的数据组合在一起，基于它们之间的关系进行查询。常见的表连接类型包括内连接、左连接、右连接和全外连接。以下是这些连接类型的详细说明： 1. 内连接&#x…...

编程日记 2025/8/26 0:12:18

【JAVA】ThreadPoolTaskExecutor 线程池学习、后端异步、高并发处理

ThreadPoolTaskExecutor 是 Spring 框架提供的一个线程池实现类，基于 Java 原生的 ThreadPoolExecutor 进行了封装和扩展，支持更灵活的配置，并与 Spring 的依赖注入、生命周期管理等功能无缝集成。它常用于异步任务处理、定时任务调度和高并发…...

编程日记 2025/8/23 2:15:12

PPT 小黑第38套

对应大猫40 幻灯片母板-最后一页-重命名为奇数页奇偶页-点中标题-形状格式-形状填充-青色最后一页页码左对齐更换幻灯片背景：设计-设置背景格式-图片填充【开始】-段落居中，对齐文本-中部对齐，排列-对齐-底端，-再水平居中…...

编程日记 2025/8/26 13:29:25

安卓开发相机功能

相机功能安卓中的相机调用功能也经历了很多的方案升级，目前可选的官方方案是CameraX、Camera2、Camera（废弃），还有一些第三方免费或者是付费的相机库。对于大多数开发者，建议使用 CameraX。 CameraX CameraX 是 An…...

编程日记 2025/8/29 13:12:01

宝塔找不到php扩展swoole，服务器编译安装

1. 在php7.4中安装swoole，但找不到这个扩展安装 2. 服务器下载源码解压安装 http://pecl.php.net/package/swoole 下载4.8.0版本解压到/www/server/php/74/下 3. 发现报错问题； 更新一下依赖 yum update yum -y install gcc gcc-c autoconf libjpe…...

编程日记 2025/8/16 10:27:02

Spring Web MVC

前言今天来复习 Spring Web MVC 框架。它提供了一套高效、便捷的方式来构建 Web 应用程序。今天，就让我们一同深入 Spring Web MVC，从基础概念到实际应用，好好补补. 一、Spring Web MVC 是什么？ 官方定义解读根据官方描述&…...

编程日记 2025/8/29 6:40:35

蓝桥杯备考：动态规划线性dp之下楼梯问题进阶版

老规矩，按照dp题的顺序 step1 定义状态表达 f[i]表示到第i个台阶的方案数 step2:推导状态方程 step3:初始化初始化要保证 1.数组不越界 2.推导结果正确如图这种情况就越界了，我们如果把1到k的值全初始化也不现实，会增加程序的时间复杂度…...

编程日记 2025/8/20 3:58:05

机器视觉开发教程——封装Halcon通用模板匹配工具【含免费教程源码】

目录引言前期准备Step1 设计可序列化的输入输出集合【不支持多线程】Step2 设计程序框架1、抽象层【IProcess】2、父类【HAlgorithm】3、子类【HFindModelTool】 Step3 设计UI结果展示引言通过仿照VisionPro软件二次开发Halcon的模板匹配工具，便于在客户端软件中…...

编程日记 2025/8/21 19:09:59

UDP透传程序

UDP透传程序本脚本用于在设备 A 和设备 B 之间建立 UDP 数据转发桥梁，适用于 A 和 B 设备无法直接通信的情况。流程： A --> 电脑 (中继) --> B B --> 电脑 (中继) --> A 需要修改参数： B_IP “192.168.1.123” # 设备 B 的…...

编程日记 2025/8/30 4:23:17

【USRP】NVIDIA Sionna：用于 6G 物理层研究的开源库

目录 Sionna：用于 6G 物理层研究的开源库主要特点实现6G研究的民主化支持 5G、6G 等模块化、可扩展、可伸缩快速启动您的研究好处原生人工智能支持综合研究平台开放生态系统安装笔记使用 pip 安装基于Docker的安装从源代码安装“你好世界！”探索锡奥纳…...

编程日记 2025/8/30 11:19:47

Spring WebFlux 中 WebSocket 使用 DataBuffer 的注意事项

以下是修改后的完整文档，包含在多个多线程环境中使用 retain() 和 release() 方法的示例，且确保在 finally 块中调用 release()： 在 Spring WebFlux 中，WebSocketMessage 主要用于表示 WebSocket 的消息载体，其中 getP…...

编程日记 2025/8/29 15:12:41

SQL经典常用查询语句

1. 基础查询语句 1.1 查询表中所有数据在SQL中，查询表中所有数据是最基本的操作之一。通过使用SELECT * FROM table_name;语句，可以获取指定表中的所有记录和列。例如，假设有一个名为employees的表，包含员工的基本信息&#xf…...

编程日记 2025/8/28 21:22:54

0005__PyTorch 教程

PyTorch 教程 | 菜鸟教程离线包：torch-1.13.1cpu-cp39-cp39-win_amd64.whl https://download.pytorch.org/whl/torch_stable.html...

编程日记 2025/8/16 12:17:54

高并发场景下的数据库优化

在高并发系统中，数据库通常是性能瓶颈。面对高并发请求，我们需要采用合适的优化策略，以保证数据库的稳定性和高效性。本文将介绍数据库高并发问题的成因，并结合 Mybatis-Plus，探讨乐观锁、悲观锁、高并发优化及数据库…...

编程日记 2025/8/29 3:53:18

Linux：同步

目录一、同步概念条件变量二、生产者消费者模型三、环形队列一、同步概念互斥用来解决访问临界资源的非原子性，通俗来说，由于互斥锁的实现，保证了在用户角度看，同一个时间内访问临界资源的代码只有一个线程在执行。而…...

编程日记 2025/8/25 21:50:52

GB28181开发--ZLMediaKit‌+WVP+Jessibuca‌

一、核心组件功能 1‌、ZLMediaKit‌ 定位‌：基于 C++11 的高性能流媒体服务框架，支持 RTSP/RTMP/HLS/HTTP-FLV 等协议互转，具备低延迟（最低 100ms）、高并发（单机 10W 级连接）特性，适用于商用级流媒体服务器部署‌。 ‌特性‌：跨平台（Linux/Windows/ARM 等）、支持 …...

编程日记 2025/8/27 14:11:14

23种设计模式之《备忘录模式（Memento）》在c#中的应用及理解

程序设计中的主要设计模式通常分为三大类，共23种： 1. 创建型模式（Creational Patterns） 单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点。工厂方法模式&#xff0…...

编程日记 2025/8/27 22:11:56

Oracle删除重复数据保留其中一条

Oracle删除重复数据保留其中一条在Oracle数据库中，要删除重复数据并保留其中一条记录，可以使用多种方法。这里介绍两种常见的方法：使用ROWID或使用ROW_NUMBER()窗口函数。方法1：使用ROWID ROWID是Oracle中用来唯一标识表中每…...

编程日记 2025/8/27 11:12:00

deepseek助力运维和监控自动化

将DeepSeek与Agent、工作流及Agent编排技术结合，可实现IT运维与监控的智能化闭环管理。以下是具体应用框架和场景示例： 一、智能Agent体系设计多模态感知Agent 日志解析Agent：基于DeepSeek的NLP能力，实时解析系统日志中的语义&a…...

编程日记 2025/8/30 2:27:17

16.1STM32_ADC

STM32_ADC 数字信号分为高/低电平两种状态模拟信号就是任意的电压值 STM32芯片内就是一整套的数字逻辑电路，来实现我们的程序执行，以及各种各样的外设功能， ADC（模拟-数字转换技术）的功能就是将模拟信号转化为数字…...

编程日记 2025/8/28 23:08:26

神经网络 - 激活函数（Swish函数、GELU函数）

一、Swish 函数 Swish 函数是一种较新的激活函数，由 Ramachandran 等人在 2017 年提出，其数学表达式通常为其中 σ(x) 是 Sigmoid 函数（Logistic 函数）。如何理解 Swish 函数自门控特性 Swish 函数可以看作是对输入 x 进行“…...

编程日记 2025/8/19 21:03:49

VS2015 c++和cmake配置编程

Visual Studio 2015：确保安装了C开发工具，并安装“使用C的桌面开发”工作负载。CMake：可以从 CMake官网下载并安装，并将其添加到系统环境变量中。vs加载项目启动Visual Studio。选择“继续但无代码”。点击“文件”。选择 “打开…...

编程日记 2025/8/16 12:01:59

如何为 Web 前端开发面试做好准备

大家好！我是 [数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！ 开发领域：前端开发 | AI 应…...

编程日记 2025/8/22 18:20:32

深入探索像ChatGPT这样的大语言模型

参考【必看珍藏】2月6日，安德烈卡帕西最新AI普及课：深入探索像ChatGPT这样的大语言模型｜Andrej Karpathy fineweb知乎翻译介绍 fineweb-v1原始连接 fineweb中文翻译版本 Chinese Fineweb Edu数据集查看网络的内部结果，可以参…...

编程日记 2025/8/28 14:47:11

代码贴——堆（二叉树）数据结构

头文件Heap.h #pragma once #include<bits/stdc.h> typedef int HPDataType;typedef struct Heap {HPDataType* a;int size;int capacity; }HP;void HPInit(HP* php); void HPDestory(HP* php); //出入后保持数据是堆 void HPPush(HP* php,HPDataType x); HPDataType HP…...

编程日记 2025/8/29 6:48:08

office或者word排版中，复制/黏贴进来文字不会自动换行，如何处理？

李升伟整理一、思考与分析在Office或Word中复制粘贴文字时，文字不会自动换行，需要处理这个问题。首先，我得回想一下常见的原因和解决方法。可能的情况有很多，比如文本带有硬回车、段落格式设置问题，或者文本框的自…...

编程日记 2025/8/27 7:13:07

【MySQL】(2) 库的操作

SQL 关键字，大小写不敏感。一、查询数据库 show databases; 注意加分号，才算一句结束。二、创建数据库 {} 表示必选项，[] 表示可选项，| 表示任选其一。示例：建议加上 if not exists 选项。三、字符集编码和排序…...

编程日记 2025/8/22 10:49:06

记一次渗透测试实战：SQL注入漏洞的挖掘与利用

0x01 漏洞发现在对某网站进行安全测试时，发现以下URL存在异常： https://******.com/search.php?keyword1&zt1954&dw1885&zz& 当参数keyword和zt被赋值为-1时页面返回特殊内容，初步判断存在SQL注入漏洞。 0x02 注入验证…...

编程日记 2025/8/29 0:26:59

Gin框架从入门到实战：核心用法与最佳实践

为什么选择Gin框架？ Gin 是一个基于 Go 语言的高性能 Web 框架，具备以下优势： 轻量高效：底层依赖 net/http，性能接近原生。简洁优雅：API 设计友好，支持路由分组、中间件链、参数绑定等特性。生…...

编程日记 2025/8/26 1:38:16

PyTorch 的 nn.NLLLoss：负对数似然损失全解析

PyTorch 的 nn.NLLLoss：负对数似然损失全解析在 PyTorch 的损失函数家族中，nn.NLLLoss（Negative Log Likelihood Loss，负对数似然损失）是一个不太起眼但非常重要的成员。它经常跟 LogSoftmax 搭配出现，尤…...

编程日记 2025/8/30 6:25:26

ROS2软件调用架构和机制解析：Publisher创建

术语 DDS (Data Distribution Service): 用于实时系统的数据分发服务标准，是ROS 2底层通信的基础RMW (ROS Middleware): ROS中间件接口，提供与具体DDS实现无关的抽象APIQoS (Quality of Service): 服务质量策略，控制通信的可靠性、历史记录、…...

编程日记 2025/8/28 1:48:51

vue2 以及vue3中 v-if和v-for是否可以同时使用

vue2以及vue3官方文档中都明确的指出避免 v-if 和 v-for 用在一起 vue2 官方文档解释在 Vue 2 中，v-for 的优先级高于 v-if，也就是说，Vue 2 在渲染时，会先处理 v-for 生成列表项，再对子项判断 v-if 是否渲染。 …...

编程日记 2025/8/24 5:57:00

Hbase伪分布安装教程，详细版

注意Hbase版本与Hadoop版本的兼容，还有与JDK版本的兼容本次用到的Hbase为2.4.6版本，Hadoop为3.1.3版本，JDK为JDK8 打开下面的网址查看兼容问题 Apache HBase Reference Guidehttps://hbase.apache.org/book.html#configuration 点击基础先…...

编程日记 2025/8/29 8:59:21

SSL: CERTIFICATE_VERIFY_FAILED Error in Python 是什么问题？

在最新版本的Stable Diffusion webui 版本上使用最新下载的模型时，出现了类似的错误。 SSL: CERTIFICATE_VERIFY_FAILED 错误在Python中通常表示你的程序试图通过HTTPS连接到某个服务器，但Python无法验证该服务器提供的SSL证书。这可能是因为以下几种原…...

编程日记 2025/8/29 20:59:36

15Metasploit框架介绍

metasploit目录结构 MSF ——the metasploit framework 的简称。MSF高度模块化，即框架结构由多个module组成，是全球最受欢迎的工具是一筐开源安全漏洞利用和测试工具，集成了各种平台上常见的溢出漏洞和流行sheellcode，并且保持…...

编程日记 2025/8/25 12:43:55

【Qt】ffmpeg解码—照片提取、视频播放▲

目录一、图像的成像原理： RGB成像原理： YUV成像原理： 二、多线程三、ffmpeg解码（照片提取） 1.准备工作 （1）在工程文件夹里面新建三个文件夹 （2）在main函数中加…...

编程日记 2025/8/29 3:37:39

Springboot整合WebSocket+Redis以及微信小程序如何调用

一、 Springboot整合WebSocket 1. 引入socket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>引入依赖后需要刷新maven,Websocket的版本默认跟随S…...

编程日记 2025/8/19 10:58:55

解决跨域请求问题的方法

1. 服务器端配置响应头

2. JSONP（JSON with Padding）

3. 代理服务器

场景示例

前端代码（使用 Fetch API）

后端代码（使用 Node.js + Express 并设置 CORS 响应头）

相关文章：