记录:Vue 构建前端项目,在本地开发时通常会使用代理来转发请求,避免跨域请求问题

news/2024/12/28 11:08:47/
// vue.config.js
module.exports = {devServer: {proxy: {'/dev-api': {target: 'http://localhost:3000',  // 后端 API 地址changeOrigin: true,  // 是否修改请求头中的 Origin 字段pathRewrite: {'^/dev-api': ''  // 将请求路径中的 /dev-api 前缀去掉}}}}
}
  • target:后端服务器的地址。

  • changeOrigin:将请求头中的 Origin 字段修改为目标地址(有时后端会根据 Origin 来判断请求是否合法)。

  • pathRewrite:将请求路径中的 /dev-api 前缀去掉。例如,前端请求 /dev-api/user 时,代理会将其转发到 http://localhost:3000/user

请求示例:

  • 本地 Vue 请求:http://localhost:8080/dev-api/user

  • 实际请求会被代理到:http://localhost:3000/user

这种方式使得你在开发过程中不需要修改前端代码中的 API 地址,同时也避免了跨域问题。

总结:

  • 通过配置代理,前端可以透明地请求后端服务,而不受同源策略限制。

  • dev-api 只是一个用来区分代理请求的前缀,你可以根据需求修改为任何合适的路径前缀。


http://www.ppmy.cn/news/1558189.html

相关文章

vue-axios+springboot实现文件流下载

前端vue代码&#xff1a; <template><div class"app-container documentation-container"><div><el-button type"primary" click"downloadFile(test.xlsx)">下载test.xlsx</el-button></div></div> …

L0G1000 Linux 基础知识

1.创建开发机、选择资源 2.进去开发机&#xff0c;编辑hello_world.py文件 3.SSH连接设置 4.安装环境pip install gradio 5.运行hello_world.py

设计模式-中介模式

背景&#xff08;与外观模式相似&#xff09; 智能家庭中包括各种设备&#xff1a;闹钟、咖啡机、电视机、窗帘。 主人要看电视时&#xff0c;执行以下操作&#xff1a;闹钟响起-》咖啡机做咖啡-》窗帘自动落下-》电视开始播放 传统思路&#xff1a; 闹钟类接收命令&#x…

Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店

1.Uniapp手机基座调试App。 1.1 以下是我另一篇文章 讲解 uniapp连接手机基座调试App、 Hbuildx使用SUB运行到手机基座测试_hbuilder基座-CSDN博客 2.打包本地的uniapp项目为apk文件。 打包的方式有很多种&#xff0c;我们可以选择本地打包和远程云端打包两种方式。 我们在打包…

SpringAI人工智能开发框架005---SpringAI文本转语音_语音转文本_音频翻译程序接口编写_英文音频翻译_中文音频翻译_指定模型

可以看到SpringAi中关于音频的API帮助文档可以去看一下. 可以看到帮助文档. 这部分功能就是把声音变成文本,以及把文本变成声音. 去创建一个项目 然后修改一下,仓库,引入 sring ai的仓库 然后指定一下版本,这里要用java 17的版本. 然后这里用的api-key 这个key, 这里配置到…

详解下c语言中struct和union的对齐规则

接触过c语言的同学应该都知道字节对齐。有些时候我们很容易弄错字节对齐的方式&#xff0c;特别是涉及到struct&#xff08;结构体&#xff09;和union&#xff08;联合体&#xff09;时。今天我们通过详细例子来说明下struct和union的对齐规则&#xff0c;以便了解各种struct和…

ffmpeg翻页转场动效的安装及使用

文章目录 前言一、背景二、选型分析2.1 ffmpeg自带的xfade滤镜2.2 ffmpeg使用GL Transition库2.3 xfade-easing项目三、安装3.1、安装依赖([参考](https://trac.ffmpeg.org/wiki/CompilationGuide/macOS#InstallingdependencieswithHomebrew))3.2、获取ffmpeg源码3.3、融合xf…

LeetCode每日三題(三

一、環形鏈表 自己答案&#xff1a; /*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public boolean hasCycle(ListNode …