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

前端如何解决跨域

news 来源：原创 2025/9/15 13:00:16

解决前端跨域问题有多种方法

JSONP：利用 <script> 标签的跨域能力，通过动态创建 script 标签并指定回调函数来获取数据。但只能处理 GET 请求，安全性较低。

JSONP 的原理是利用了 <script> 标签的跨域能力。因为浏览器允许 <script> 标签加载不同源的脚本。当我们动态创建一个 <script> 标签时，设置其 src 属性为跨域的 URL，并在 URL 中指定一个回调函数的名称。服务器端接收到这个请求后，会将数据作为参数传递给这个回调函数，并以 JavaScript 脚本的形式返回给浏览器。浏览器接收到这个脚本后就会执行，从而获取到数据
<script>
function callback(data) {// 处理获取到的数据console.log(data);
}
</script>
<script src="http://example.com/data?callback=callback"></script>
服务器端返回类似这样的脚本：
callback({ name: 'John' });
JSONP 的局限性在于只能处理 GET 请求，并且由于需要服务器端配合返回特定格式的数据，安全性相对较低，容易受到一些攻击。

CORS（跨域资源共享）：这是一种较为规范和安全的方式。服务器端设置响应头 Access-Control-Allow-Origin 等允许跨域访问。

CORS 是一种由服务器端设置响应头来允许跨域访问的方式。服务器通过在响应头中添加特定的字段，如 Access-Control-Allow-Origin （指定允许访问的源）、Access-Control-Allow-Methods （允许的请求方法）、Access-Control-Allow-Headers （允许的请求头）等，来告知浏览器是否允许跨域请求。
例如，服务器端的响应头可能像这样：
Access-Control-Allow-Origin: http://your-site.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
CORS 分为简单请求和预检请求。简单请求直接发送并获取响应，而预检请求会先发送一个 OPTIONS 请求来询问服务器是否允许当前的跨域请求，得到允许后再发送实际请求。
CORS 是一种规范且安全的跨域解决方案，但需要服务器端进行相应的配置支持。

代理服务器：在开发环境中，可以通过配置代理服务器，将请求转发到目标服务器，让浏览器认为是同源请求

假设我们的前端应用运行在 http://localhost:8080 这个地址，而要请求的数据在 http://example.com/api/data 这个不同源的地址。
这时，我们可以在开发环境的配置中（比如 vue.config.js 或者 webpack.config.js ）设置代理服务器。
以 Vue 项目为例，在 vue.config.js 中可以这样配置：
module.exports = {devServer: {proxy: {'/api': {target: 'http://example.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}
上述配置中，'/api' 是我们定义的一个匹配路径的规则。当发送的请求路径以 /api 开头时，就会触发代理。
target 字段指定了要转发到的目标服务器地址，也就是 http://example.com 。
changeOrigin 设为 true ，表示改变请求头中的 Origin 字段，让服务器认为请求来自于它自己，从而实现跨域。
pathRewrite 用于重写请求路径，把 /api 去掉，以便正确地访问目标服务器上的资源。
这样，当浏览器发送一个请求，比如 http://localhost:8080/api/data 时，实际上会被代理服务器转发为 http://example.com/data ，从而让浏览器认为这是同源请求，成功获取到数据

vue.config.js和webpack.config.js各自有什么区别

vue.config.js 是 Vue 项目特有的配置文件。主要用于对 Vue 项目进行一些个性化的配置，比如设置开发服务器的代理、修改打包输出的路径、添加插件等。它专注于 Vue 项目相关的特定配置，并且是基于 Vue CLI 提供的一套配置体系。

webpack.config.js 则是 Webpack 的配置文件。Webpack 是一个更通用的模块打包工具，不仅仅用于 Vue 项目，也可以用于其他各种前端项目。在这个配置文件中，可以对模块的加载、打包的规则、插件的使用等进行非常详细和灵活的配置。

总结来说，vue.config.js 是针对 Vue 项目的特定配置，相对更简洁和专注于 Vue 相关的特性；而 webpack.config.js 是 Webpack 这个打包工具的通用配置，更全面和底层，适用于各种项目类型。

记忆口诀：“Vue 配置特定专，简洁针对 Vue 干。Webpack 通用全，各种项目皆可管

WebSocket：它不受同源策略的限制，可以实现跨域通信。

WebSocket 是一种全双工的通信协议，它建立在单个 TCP 连接上，服务器和客户端可以随时向对方发送数据。由于其协议本身的特性，不受同源策略的限制，可以实现跨域通信
const socket = new WebSocket('ws://example.com/socket');socket.onopen = function() {socket.send('Hello Server!');
};socket.onmessage = function(event) {console.log(event.data);
};
WebSocket 适用于需要实时双向通信的场景，如在线聊天、实时数据推送等。

记忆口诀：“跨域解决有几招，JSONP 旧不太好。CORS 规范又安全，代理转发也能搞。WebSocket 不受限，按需选择效果妙。

前端如何解决跨域

解决前端跨域问题有多种方法 JSONP：利用 <script> 标签的跨域能力，通过动态创建 script 标签并指定回调函数来获取数据。但只能处理 GET 请求，安全性较低。 JSONP 的原理是利用了 <script> 标签的跨域能力。因为浏览器允许 <…...

编程日记 2025/9/15 13:00:16

【HDLbits--Comb组合逻辑】

HDLbits--Comb组合逻辑 1.5 组合逻辑1.5 Demo 在 Verilog 中，组合逻辑（Combinational Logic）是指输出仅依赖于当前输入的逻辑电路，没有记忆功能（即没有状态存储）。组合逻辑的特点是： 无时钟信号…...

编程日记 2025/9/15 3:41:11

文章目录如何在 Linux 上安装和配置 Zsh1. 安装 Zsh1.1 在 Ubuntu/Debian 上安装1.2 在 CentOS/RHEL/Fedora 上安装1.3 在 Arch Linux 上安装1.4 验证 Zsh 安装 2. 设置 Zsh 为默认 Shell2.1 验证默认 shell 3. 配置 Zsh3.1 使用 Oh My Zsh3.1.1 安装 Oh My Zsh3.1.2 启用插件…...

编程日记 2025/9/15 3:10:34

Chromedriver与Chrome版本映射表

‌Chromedriver与Chrome版本映射表‌如下： ‌Chrome 71-73版本对应Chromedriver 2.46‌‌Chrome 70-72版本对应Chromedriver 2.45‌‌Chrome 69-71版本对应Chromedriver 2.44‌‌Chrome 68-70版本对应Chromedriver 2.43‌‌Chrome 67-69版本对应Chromedriver 2.42‌…...

编程日记 2025/9/15 12:55:32

HarmonyOS学习第7天: 文本组件点亮界面的文字魔法棒

一、引言在 HarmonyOS 那丰富多彩的系统界面中，从简洁直观的应用图标，到交互流畅的操作菜单，再到生动形象的图文展示，每一处细节都经过精心雕琢，为用户带来了独特而美妙的视觉与交互体验。而在这琳琅满目的界面元素中…...

编程日记 2025/9/14 8:59:17

06C语言——指针

一、指针入门 (1)、准备知识 0、图解： 1、内存地址字节：字节是内存的容量单位，英文称为 byte，一个字节有8位，即 1byte(0000 0000 --- 1111 1111) 8bits(0 --- 1) 地址：系统为了便于区分每一个字节而对…...

编程日记 2025/9/14 21:35:16

Ubuntu DeepSeek磁盘空间不够解决办法

标签： Ubuntu； DeepSeek磁盘空间不够解决办法；Ubuntu 22, DeepSeek R1 671 B, solution for Insufficient Disk Space 问题：Ubuntu 22， DeepSeek R1 671B 磁盘空间不够解决办法 Ubuntu 22.04操作系统，台式…...

编程日记 2025/9/15 3:41:01

东信营销科技巨额补贴仍由盈转亏：毛利率大幅下滑，现金流告急

《港湾商业观察》施子夫近期，东信营销科技有限公司（以下简称，东信营销科技）递表港交所，联席保荐机构为海通国际和中银国际。东信营销科技的国内运营主体为深圳市东信时代信息技术有限公司。尽管期内收入规模有所提…...

编程日记 2025/9/15 3:41:00

Qt layout

文章目录 Qt layout**关键机制****验证示例****常见误区****最佳实践****总结**关键点总结：示例代码说明：结论： Qt layout 在 Qt 中，当调用 widget->setLayout(layout) 时，layout 的父对象会被自动设置为该 widget…...

编程日记 2025/9/15 3:40:58

本地部署轻量级web开发框架Flask并实现无公网ip远程访问开发界面

文章目录 1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面本篇文章主要讲解如何在本地安装Flask，以及如何将其web界面发布到公网进行远程访问。 Flask是目前十分流行的web框架，采用Python编程…...

编程日记 2025/9/15 12:50:47

基于YOLO11深度学习的苹果叶片病害检测识别系统【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/9/15 3:40:54

Android MMKV集成指南

首先简单介绍一下MMKV当下Android Studio最版本及Gradle8.7 MMKV集成根据官方文档重新对mmkv重新包了一次（便于开发）总结首先简单介绍一下MMKV MMKV 是腾讯开源的一款专为移动端设计的高性能键值存储组件，旨在替代传统的 SharedPreferences 和 SQLite，尤其在频繁读写和数据…...

编程日记 2025/9/15 3:40:52

React七Formik

Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理，表单验证以及表单提交。Formik支持React中的所有表单元素和事件，可以很好地与React生态系统中的其他库集成。同时，Formik还提供了一些高级功能&#xf…...

编程日记 2025/9/15 3:40:50

5分钟使用Docker部署Paint Board快速打造专属在线画板应用

文章目录前言1.关于Paint Board2.本地部署paint-board3.使用Paint Board4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定Paint Board公网地址 💡 推荐前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住…...

编程日记 2025/9/15 3:40:48

可狱可囚的爬虫系列课程 14：10 秒钟编写一个 requests 爬虫

一、前言当重复性的工作频繁发生时，各种奇奇怪怪提高效率的想法就开始萌芽了。当重复代码的模块化封装已经不能满足要求的时候，更高效的方式就被揭开了神秘的面纱。本文基于这样的想法，来和大家探讨如何 10 秒钟编写一个 requests 爬虫程序。…...

编程日记 2025/9/14 21:39:49

【深度学习神经网络学习笔记（三）】向量化编程

向量化编程向量化编程前言1、向量化编程2、向量化优势3、正向传播和反向传播向量化编程前言向量化编程是一种利用专门的指令集或并行算法来提高数据处理效率的技术，尤其在科学计算、数据分析和机器学习领域中非常常见。它允许通过一次操作处理整个数组或矩阵的…...

编程日记 2025/9/15 3:40:44

PHP入门基础学习四（PHP基本语法）

运算符运算符，专门用于告诉程序执行特定运算或逻辑操作的符号。根据运算符的作用，可以将PHP语言中常见的运算符分为9类算数运算符： 是用来处理加减乘除运算的符号也是最简单和最常用的运算符号赋值运算符 1. 是一个二元运算符&#x…...

编程日记 2025/9/15 3:40:43

【十二】Golang 映射

💢欢迎来到张胤尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录映射映射的定义映射初始化make 函数使用字面量源…...

编程日记 2025/9/15 3:40:40

简单理解Oracle中的latch

可以用一个小卖部抢购的例子来理解 Oracle 数据库中的 Latch： 1、什么是 Latch？ 打个比方，假设数据库的某个内存区域（比如缓存的数据块）是小卖部货架上的最后一包辣条，Latch 就像是货架前的一个狭窄通道&a…...

编程日记 2025/9/15 3:40:38

hbase集群部署

1.hbase集群的搭建（以及内部逻辑） 虽然Hmaster有多个，但是属于热备，起作用的就active上的这个。部署流程： 因为我配置的hadoop是一个非HA的，所以修改为以下如果是HA的hadoop一定要做以下这一步。在启动…...

编程日记 2025/9/14 15:39:38

塔能物联运维保障智慧地下停车场安全与高效

一、智慧地下停车场安全在城市升级改造中的关键地位随着城市的不断发展和升级改造，智慧地下停车场的重要性日益凸显。在现代城市中，土地资源愈发珍贵，地下停车场成为解决停车难题的关键设施。然而，停车场的安全问题是其正常运行和…...

编程日记 2025/9/15 1:39:43

面试八股文--数据库基础知识总结(2) MySQL

本文介绍关于MySQL的相关面试知识一、关系型数据库 1、定义关系型数据库（Relational Database）是一种基于关系模型的数据库管理系统（DBMS），它将数据存储在表格（表）中，并通过表格…...

编程日记 2025/9/15 1:39:41

深入理解指针2

深入理解指针2 数组名的理解数组名就是首元素的地址 int arr[]{1,3,2}; printf("%p\n",arr); printf("%p\n",&arr[0]);但是有两种情况除外， 1.sizeof(数组名)，sizeof操作符统计的是整个数组的大小，并不是第一个元素…...

编程日记 2025/9/15 5:03:25

QT各种版本下载安装

参考链接： 【Qt】超详细！Qt4.8.6和VS2010的配置及使用由于QT官网一般现在进不去，所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行，现在推荐两种方法从参考链接中搬过来： 方案一：国内镜…...

编程日记 2025/9/15 1:39:37

java进阶学习脑图

今天开始分享我的第一篇博客，先放上我自己花费一个月完成的java进阶学习脑图吧！ 谁都想像R大一样对JVM可以知无不言，言无不尽； 谁都想像Doug Lea一样可以参与JUC这种核心模块的开发； 但是，不能只停留在想…...

编程日记 2025/9/15 12:50:26

Spring 原始注解详解与实战指南

📝 1. 前言在 Spring 框架的发展过程中，注解的引入大大简化了配置，提升了开发效率本文将详细介绍 Spring 最初引入的核心注解，包括 Component、Controller、Service、Repository、Autowired、Qualifier 和 Value 等，…...

编程日记 2025/9/15 1:39:33

uniapp封装请求

在uniapp中封装HTTP请求，通常我们会使用uni.request方法。uni.request是uni-app提供的一个网络请求API，可以用来发送各种类型的HTTP请求（GET、POST、PUT、DELETE等）。下面是如何在uniapp中封装一个通用的HTTP请求方法，…...

编程日记 2025/9/15 1:39:31

YOLOv10 解析与地平线征程 6 模型量化

一，YOLOv10 解析 1.简介近些年来，研究人员对 YOLO 的架构设计、优化目标、数据增强策略等进行了探索，取得了显著进展。然而，后处理对非极大值抑制（NMS）的依赖阻碍了 YOLO 的端到端部署，并对推…...

编程日记 2025/9/15 1:39:30

基本网络安全的实现

基本网络安全的实现一 ：AAA AAA 是Authentication，Authorization and Accounting（认证、授权和计费）的简称，它提供了一个用来对认证、授权和计费这三种安全功能进行配置的一致性框架， 它是对网络安全…...

编程日记 2025/9/14 13:25:23

ROS2 强化学习：案例与代码实战

一、引言在机器人技术不断发展的今天，强化学习（RL）作为一种强大的机器学习范式，为机器人的智能决策和自主控制提供了新的途径。ROS2（Robot Operating System 2）作为新一代机器人操作系统，具有…...

编程日记 2025/9/14 3:10:18

Java数据结构第十四期：走进二叉树的奇妙世界(三)

专栏：数据结构(Java版) 个人主页：手握风云目录一、二叉树OJ练习题 1.1. 相同的树 1.2. 另一棵树的子树 1.3. 翻转二叉树 1.4. 平衡二叉树 1.5. 对称二叉树一、二叉树OJ练习题 1.1. 相同的树判断两棵树是否相同，我们是否只能遍历一…...

编程日记 2025/9/15 12:52:32

GO 进行编译时插桩，实现零码注入

Go 编译时插桩 Go 语言的编译时插桩是一种在编译阶段自动注入监控代码的技术，目的是在不修改业务代码的情况下，实现对应用程序的监控和追踪。基本原理 Go 编译时插桩的核心思想是通过在编译过程中对源代码进行分析和修改，将监控代码注入到…...

编程日记 2025/9/15 12:50:45

《炎龙骑士团 1 邪神之封印》游戏信息

发行公司：1994 年由汉堂国际资讯公司发行。游戏类型：回合制角色扮演游戏故事背景远古之战：在远古时代，圣族与魔族爆发大战，魔族领导者大邪神力量强大，圣族处于下风。圣族派出十二战士突袭，虽…...

编程日记 2025/9/15 12:58:06

本地大模型编程实战(23)用智能体(Agent)实现基于SQL数据构建问答系统(2)

本文将用智能体(Agent) 实现对 SQLite 数据库的查询：用户用自然语言提出问题，智能体也用自然语言根据数据库的查询结果回答问题。本次将分别在英文、中文环境下，使用 qwen2.5 、 MFDoom/deepseek-r1-tool-calling:7b 以及 llama3.1 做实验。…...

编程日记 2025/9/15 1:39:19

Flash-03

1-问题：Flash软件画两个图形，若有部分重合则变为一个整体解决方法1：两个图形分属于不同的图层解决方法2：将每个图形都转化为【元件】问题2：元件是什么？ 在 Adobe Flash（现在称为 Adobe Anim…...

编程日记 2025/9/15 12:54:17

防火墙双机热备---VRRP,VGMP,HRP(超详细)

双机热备技术-----VRRP，VGMP，HRP三个组成注：与路由器VRRP有所不同，路由器是通过控制开销值控制数据包流通方向防火墙双机热备： 1.主备备份模式双机热备最大的特点就是防火墙提供了一条专门的备份通道（心…...

编程日记 2025/9/15 12:58:05

PC端-发票真伪查验系统-Node.js全国发票查询接口

在现代企业的财务管理中，发票真伪的验证至关重要。随着电子发票的普及，假发票问题日益严峻，如何高效、准确的对发票进行真伪查验，已经成为各类企业在日常运营中必须解决的关键问题。翔云发票查验接口做企业财务管理、税务合规的好…...

编程日记 2025/9/14 9:11:22

3.1部署filebeat:5044

beats是ELK体系中新增的一个工具，, 属于一个轻量的日志采集器。 1.安装（每台） # tar xf filebeat-6.4.1-linux-x86_64.tar.gz # mv filebeat-6.4.1-linux-x86_64 /usr/local/filebeat #yum -y install httpd #systemctl start httpd 2.测试…...

编程日记 2025/9/14 9:11:19

在 Windows 上配置 Ollama 服务并开放局域网访问

为了在局域网内共享 Ollama 服务，我们需要完成以下两步： 1、设置 Ollama 的环境变量 OLLAMA_HOST，使其监听局域网的 IP 地址。 （1） 配置 Ollama 服务的监听地址 Ollama 服务使用环境变量 OLLAMA_HOST 来指定监听的地…...

编程日记 2025/9/14 9:11:16

C#快速调用DeepSeek接口，winform接入DeepSeek查询资料 C#零门槛接入DeepSeek C#接入DeepSeek源代码下载

下载地址<------完整源码在数字化转型加速的背景下，企业应用系统对智能服务的需求日益增长。DeepSeek作为先进的人工智能服务平台，其自然语言处理、图像识别等核心能力可显著提升业务系统的智能化水平。传统开发模式下，C#开发者需要耗费大…...

编程日记 2025/9/14 9:11:14

解决后端跨域问题

目录一、什么是跨域问题？ 1、跨域问题的定义 2、举例 3、为什么会有跨域问题的存在？ 二、解决跨域问题 1、新建配置类 2、编写代码三、结语一、什么是跨域问题？ 1、跨域问题的定义跨域问题（Cross-Origin Resource Sh…...

编程日记 2025/9/14 9:11:12

【教程】使用docker+Dify搭建一个本地知识库

现在AI火的一塌糊涂，再不搭建一个自己的AI知识库就有点落伍了，这里我是自己的windows11电脑。用了dockerdifydeepseek。一、安装docker 网址：https://www.docker.com/ 什么是docker？ Docker 是一种开放源代码的容器化平台&…...

编程日记 2025/9/10 4:07:25

微信小程序数据绑定与事件处理：打造动态交互体验

在上一篇中，我们学习了如何搭建微信小程序的开发环境并创建了一个简单的“Hello World”页面。然而，一个真正的小程序不仅仅是静态内容的展示，它需要与用户进行动态交互。本文将深入探讨微信小程序中的数据绑定和事件处理机制，通过…...

编程日记 2025/9/13 11:57:23

Spring MVC 的执行流程解析：从用户请求到响应返回

Spring MVC 是一种基于 Model-View-Controller 设计模式的 Web 框架，用于处理用户请求、执行相应的业务逻辑并返回响应。它广泛应用于 Java Web 开发，提供了灵活的架构和丰富的功能。本文将详细介绍 Spring MVC 的执行流程，帮助你理解它是如…...

编程日记 2025/9/13 13:33:03

c++day5

作业： 编写一个如下场景： 有一个英雄Hero类，私有成员，攻击，防御，速度，生命值，以及所有的set get 方法编写一个武器 Weapon 类，拥有私有成员攻击力，以及set …...

编程日记 2025/9/15 12:19:39

Deepseek 实战全攻略，领航科技应用的深度探索之旅

想玩转 Deepseek？这攻略别错过！先带你了解它的基本原理，教你搭建运行环境。接着给出自然语言处理、智能客服等应用场景的实操方法与代码。还分享模型微调、优化技巧，结合案例加深理解，让你全面掌握，探索科技…...

编程日记 2025/9/6 12:53:29

公共数据授权运营模式研究（总体框架、主要模式及发展趋势）

本报告以公共数据运营模式为核心，以释放公共数据价值为目标，深入分析公共数据概念及特征，厘清公共数据运营的内涵及本质，提出纵深分域数据要素市场运营体系的总体思路，构建了一座（一个数据底座）…...

编程日记 2025/9/15 5:54:02

本地开发用ASP.NET Core Web API项目创建及测试

1. 服务端代码（C#） 1.1 创建ASP.NET Core Web API项目打开Visual Studio 2022。选择“创建新项目”。选择“ASP.NET Core Web API”模板，点击“下一步”。输入项目名称（如OracleApi），选择项目位置&…...

编程日记 2025/9/15 5:54:01

【虚拟仪器技术】labview操作指南和虚拟仪器技术习题答案(一)

今天是2025年2月24日，画的是fate/Grand Order里面的阿尔托莉雅.卡斯特，武内老师的画。目录第1章第2章第3章第4章第5章关注作者了解更多我的其他CSDN专栏毕业设计求职面试大学英语过程控制系统工程测试技术虚拟仪器技术可编程…...

编程日记 2025/9/15 5:53:59

SpringCloud系列教程：微服务的未来（二十五）-基于注解的声明队列交换机、消息转换器、业务改造

前言在现代分布式系统中，消息队列是实现服务解耦和异步处理的关键组件。Spring框架提供了强大的支持，使得与消息队列（如RabbitMQ、Kafka等）的集成变得更加便捷和灵活。本文将深入探讨如何利用Spring的注解驱动方式来配置和管理队…...

编程日记 2025/9/15 5:53:57

相关文章：