基于 Vue3、Vite 和 TypeScript 实现开发环境下解决跨域问题,实现前后端数据传递

news2024/11/7 12:13:11

引言

本文介绍如何在开发环境下解决 Vite 前端(端口 3000)和后端(端口 80)之间的跨域问题:

在开发环境中,前端使用的 Vite 端口与后端端口不一致,会产生跨域错误提示:
Access to XMLHttpRequest at 'http://localhost/api/some-endpoint' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

通过在 Vite 配置文件vite.config.tsvite.config.js中设置代理,将前端请求转发到后端,从而绕过跨域限制。

在这里插入图片描述

操作步骤:

  1. 打开 vite.config.tsvite.config.js,添加 server.proxy 属性。

  2. 配置代码示例:

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      server: {
        proxy: {
          '/api': {
            target: 'http://localhost:80', // 后端地址
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '') // 移除路径中的 /api 前缀
          }
        }
      }
    })
    

在此配置中,所有发往 /api 的请求都会被代理到 http://localhost:80,并移除 /api 前缀(具体根据你的后端接口路径调整)。

  1. 修改前端请求的 URL:

    将之前的请求:

    axios.get('http://localhost/api/some-endpoint');
    

    改为:

    axios.get('/api/some-endpoint');
    

Vite 会自动将 /api/some-endpoint 请求代理到 http://localhost:80/some-endpoint,实现与后端的跨域通信。

请求流程

在此配置下,axios.get('/api/some-endpoint') 实际会被代理到后端的 http://localhost:80/some-endpoint

  1. 请求路径axios.get('/api/some-endpoint') 先发送到开发服务器(例如 localhost:3000)。
  2. 代理配置:Vite 检测到请求路径包含 /api,会将它代理到目标地址 http://localhost:80
  3. 路径重写rewrite 函数移除 /api 前缀。
  4. 最终地址:请求被代理转发到 http://localhost:80/some-endpoint

配置的意义

尽管直接请求 http://localhost:80/api/some-endpoint 是正确的后端地址,但 Vite 代理配置能避免跨域问题,简化代码,并更灵活地适配不同环境。代理配置的主要作用是:

  1. 解决同源策略限制:即使端口相同,浏览器也会限制跨域请求,而代理让前端和后端之间的请求看起来是同源的。
  2. 路径简化:设置代理后,代码只需写 /api 路径,方便维护。
  3. 更好的环境切换:代理配置可轻松适配开发、测试、生产等不同环境。

配置效果总结:

  • 避免跨域限制:请求通过代理后,看起来是发往开发服务器的,绕过跨域限制。
  • 代码简洁:代理后代码路径更简洁,便于管理。
  • 环境适配:代理配置使切换环境更方便,只需更改 target 地址。

长路径代理的配置示例

如果你的请求路径较长,并且希望代理后的地址保留原始路径结构,例如 http://localhost:80/csdn/test/bbq/api/some-endpoint,可以使用如下配置来实现(注意,80 是默认端口,可以省略不写):

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/csdn': {
        // 后端服务器地址
        target: 'http://localhost:80/csdn/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/csdn/, '')
      }
    }
  }
});

在具体请求中:

// 示例请求代码
const postUrl = 'http://localhost:3000/csdn/test/bbq/api/some-endpoint';

说明

这里的思路是通过本地开发服务器(前端所在服务器)反向代理到后端所在服务器。你发出的请求指向 localhost:3000,Vite 代理会将其转发至 localhost:80 的相应路径。

因此,尽管请求地址使用了 3000 端口,但代理机制会帮你将其转换为原始的后端路径结构,从而实现数据交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234997.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenCV-Python-安装环境与测试样例

本文使用Pycharm安装openCV 1.打开pycharm终端 (GUI是我自己创建的项目名称) 错误:终端如果打开闪退的话 应对如下: 汉化版:文件->设置->工具->终端->红框位置设置cmd 英文版:file->settings->Tools->t…

Spark on YARN:Spark集群模式之Yarn模式的原理、搭建与实践

Spark 的介绍与搭建:从理论到实践-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 Spark 程序开发与提交:本地与集群模式全解析-CSDN博客 目录 一、Spark on YARN 的优势 (一&#…

基于IM场景下的Wasm初探:提升Web应用性能|得物技术

一、何为Wasm ? Wasm,全称 WebAssembly,官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标,用于编译C/C/Rust等高级语言,支持在Web上部署客户端和服务器应用程序。 Wasm 的开发者参…

【JAVA毕业设计】基于Vue和SpringBoot的墙绘产品展示交易平台

本文项目编号 T 049 ,文末自助获取源码 \color{red}{T049,文末自助获取源码} T049,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

在全域数据整合过程中,如何确保数据的一致性和准确性

在全域数据整合过程中,确保数据的一致性和准确性是至关重要的,这不仅关系到数据分析结果的可靠性,还直接影响到企业决策的科学性和有效性。Aloudata AIR 逻辑数据编织平台通过数据虚拟化技术,为这一过程提供了强有力的支持。以下是…

w024基于SpringBoot的企业客户管理系统的设计与实现

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文件&#xff0…

element-plus快速实现table组件表头吸顶和滚动条吸底

使用devecoui 组件快速实现 element-plus table 组件,表头吸顶和滚动条吸底,且完美实现固定表头的吸顶效果,同时devecoui组件还可以实现,查询列表的快速开发,里面集成了更多的功能。详细功能请前往:添加链接…

C++STL容器详解——list

目录 一.list 1.list的介绍 2.为什么会有list? 二.list的常见接口 1.list的构造函数 2.list的遍历 3.迭代器类型 4.list的头插头删和尾插尾删 5.list任意位置的插入和删除 6.list的sort()及reverse() 7.迭代器失效 三.整体代码 一.list 1.list的介绍 list的文档说…

服务器数据恢复—EVA存储故障导致上层应用不可用的数据恢复案例

服务器存储数据恢复环境: 一台EVA某型号控制器EVA扩展柜FC磁盘。 服务器存储故障&检测: 磁盘故障导致该EVA存储中LUN不可用,导致上层应用无法正常使用。 服务器存储数据恢复过程: 1、将所有磁盘做好标记后从扩展柜中取出。硬…

hf_transformers

强者自定义,弱者用默认,傻逼不看说明书 1. 2.在 model.generate()里填参数,默认为20个新token generated_ids model.generate(**model_inputs, max_new_tokens50) 3. 默认情况下,除非在GenerationConfig文件中指定&#xff0…

Sigrity Power SI 3D-EM Inductance Extraction模式如何进行电感的提取操作指导(一)

Sigrity Power SI 3D-EM Inductance Extraction模式如何进行电感的提取操作指导(一) Sigrity Power SI使用3D-EM Inductance Extraction模式可以进行电感的提取,以下图为例 2D 视图 <

学习记录:js算法(八十七):单词搜索

文章目录 单词搜索思路一思路二 单词搜索 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其…

应急救援无人车:用科技守护安全!

一、核心功能 快速进入危险区域&#xff1a; 救援无人车能够迅速进入地震、火灾、洪水等自然灾害或重大事故的现场&#xff0c;这些区域往往对人类救援人员构成极大威胁。 通过自主导航和环境感知技术&#xff0c;无人车能够避开危险区域&#xff0c;确保自身安全的同时&…

辩论赛——动态IP与静态IP的巅峰对决

尊敬的各位观众&#xff1a; 大家好&#xff01;欢迎来到今天的演说舞台&#xff0c;我是主持人小蝌蚪。今天&#xff0c;我们将见证一场精彩绝伦的辩论&#xff0c;辩论的双方是动态IP和静态IP。他们将围绕各自的优缺点展开激烈的辩论&#xff0c;为我们揭示代理IP世界中的奥…

红米k70怎么设置「短信通知」在锁屏时隐藏内容,不锁屏时不隐藏内容

红米 K70 设置短信通知在锁屏时隐藏内容、不锁屏时不隐藏内容&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开手机设置&#xff1a;在主屏幕上找到并点击 “设置” 图标&#xff0c;进入手机设置页面。进入通知与控制中心&#xff1a;在设置页面中&#xff0c;找到并点…

【计算机网络】零碎知识点(易忘 / 易错)总结回顾

一、计算机网络的发展背景 1、网络的定义 网络是指将多个计算机或设备通过通信线路、传输协议和网络设备连接起来&#xff0c;形成一个相互通信和共享资源的系统。 2、局域网 LAN 相对于广域网 WAN 而言&#xff0c;局域网 LAN 主要是指在相对较小的范围内的计算机互联网络 …

Python 在PDF中绘制形状(线条、矩形、椭圆形等)

在PDF中绘制图形可以增强文档的视觉效果。通过添加不同类型的形状&#xff0c;如实线、虚线、矩形、圆形等&#xff0c;可以使文档更加生动有趣&#xff0c;提高读者的阅读兴趣。这对于制作报告、演示文稿或是教材特别有用。本文将通过以下几个示例介绍如何使用Python 在PDF中绘…

三菱MR-J4伺服绝对位置检测系统

发生[AL.25 绝对位置丢失]或[AL.E3 绝对位置计数器警告]时&#xff0c;必须再次进行原点设定。否则可能会因此发生预料之外的动作。 概要 常规运行时&#xff0c;编码器由检测1转内位置的编码器和检测转数的旋转累计计数器构成。 绝对位置检测系统与伺服系统控制器电源…

程序员行业会因此受到什么冲击?

床铺再次当选&#xff0c;会对两家关系产生深远影响。在此篇博客中&#xff0c;我们将探讨床铺的政策对我们外贸、就业、留学以及特别是互联网产业和我们程序员职业的潜在影响。 关系趋紧&#xff1a;摩擦可能会更多 床铺在其任期期间对我们施加了诸多贸易税&#xff0c;采取…

Edge浏览器打开PDF无法显示电子签章

Edge浏览器打开PDF无法显示电子签章 直接说处理方式 直接说处理方式 浏览器地址栏&#xff0c;输入 edge://flags/搜索&#xff1a;pdf禁用&#xff1a;New PDF Viewer效果如下