vite跨域proxy设置与开发、生产环境的接口配置,接口在生产环境下,还能使用proxy代理地址吗

文章目录

    • vite的proxy开发环境设置
    • 如果后端没有提供可以替换的'/mis'等可替换的后缀的处理办法
    • 接口如何区分.env.development开发和.env.production生产环境
    • 接口在生产环境下,还能使用proxy代理地址吗?

vite的proxy开发环境设置

环境:

  • vite 4.4.9(2023-9-27为止的最新版)
  • vue3 3.3.4(2023-9-27为止的最新版)
  • vant 4.6.8(2023-9-27为止的最新版)-这个只是UI框架,不影响配置
  • nodejs 16.16.0

开发环境配置需要在vite.config.js中进行。

完整代码如下:

import { defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "@vant/auto-import-resolver";function resolve(dir) {return path.join(__dirname, dir);
}export default defineConfig({//解决在路径中用@代替src目录resolve: {alias: { "@": resolve("src") },},plugins: [vue(),Components({resolvers: [VantResolver()],}),],//这个是新增的本地服务器与proxy代理设置server: {open: false,port: 5171,https: false,hotOnly: false,proxy: {"/mis": {target: "http://106.37.73.60:8080",changeOrigin: true, //是否跨域// rewrite: (path) => path.replace(/^\/mis/, ""), //因为后端接口有mis前缀,所以不需要替换// ws: true,                       //是否代理 websockets// secure: true, //是否https接口},},},
});

重点关注'/mis'这里

如果是要访问后端的这个接口:http://www.imqd.cn/mis/auth/login,且你在request.js中写接口时,不想写mis/auth/login,而是想写/auth/login时,就需要像上面配置。它的意思是将本地的地址通过代理转发替换为后端地址,让它以为是同域请求。

更简单的理解是,它会找到后端接口的url中的'/mis',将其换为本地地址。

意思就是:http://www.imqd.cn/mis/auth/login会换成http://localhost/auth/login,但是这样会报404错误,因为替换后,接口少了mis,就需要加上才行,就比如本地http://192.168.8.87:5171/mis/auth/login的这个接口其实要等价访问后端的http://www.imqd.cn/mis/auth/login这个接口才行。添加的办法如下:

.env.development文件中写一个变量,统一添加该前缀:

# base api
VITE_BASE_API = '/mis'

这时不用写rewrite了。表示请求的本地地址和跨域地址一样,只是域名不一样,如下所示:

http://localhost:5171/mis/auth/login //本地
http://www.imqd.cn/mis/auth/login  //要代理的后端真实接口地址

如果后端没有提供可以替换的’/mis’等可替换的后缀的处理办法

如果后端提供的接口没有/mis等后缀,接口地址直接为:http://www.imqd.cn/auth/login那怎么设置请求代理地址呢?

这时也简单,可以用任意后缀来代替,最常见的就是用/api代替了,比如本地请求用http://localhost/api/auth/login来代理http://www.imqd.cn/auth/login,这样就需要修改vite.config.js如下:

proxy: {"/api": {target: "http://106.37.73.60:8080",changeOrigin: true, //是否跨域rewrite: (path) => path.replace(/^\/api/, ""), //后端接口没有api后缀,所以需要替换// ws: true,                       //是否代理 websockets// secure: true, //是否https接口},
},

然后在.env.development文件中改为VITE_BASE_API = '/api'即可

接口如何区分.env.development开发和.env.production生产环境

其实对应的就是如何使用.env.development.env.production环境。

可以在package.json中看到vitescript

"scripts": {"dev": "vite --mode development","start": "vite --host 192.168.8.81","build": "vite build"},

默认情况下,'npm run dev'即为开发环境,npm run build即为生产环境,不管在哪种环境下,你可以通过在代码中使用import.meta.env.VITE_BASE_API来调用两种开发环境的env文件下的VITE_BASE_API变量的值,如果是开发环境,就会读取.env.development中的值,生产环境,就会读取.env.production中的值。

接口在生产环境下,还能使用proxy代理地址吗?

请注意,这也是很多人会忽略的。只有在开发环境才会走vue.config.js里面的代码,proxy的代理才会生效。在生产环境下,因为前端代码已经被工程化构建化了(即dist目录下的文件),只有纯前端代码,他通常会部署到和后端服务一样的域名下,用的是相对地址,就不存在跨域了。.env.production中设置的变量也在构建过程中体现并分布到了各个接口中,如下图所示:

image-20230927141848232

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

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

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

相关文章

如何使用virtualenv的虚拟环境

要使用virtualenv创建和管理虚拟环境,可以按照以下步骤: 安装virtualenv:如果你的系统上还没有安装virtualenv,可以使用以下命令安装: pip install virtualenv创建虚拟环境:在命令行中,进入你…

c++图像的边缘检测

图像的边缘检测 cv::Canny 是 OpenCV 中用于进行边缘检测的函数,特别是用于检测图像中的边缘。Canny 边缘检测是一种广泛使用的技术,它能够识别图像中的边缘,这些边缘通常表示对象之间的边界或图像中的显著特征 void cv::Canny(const cv::M…

网安新战场:CTF的那些事儿

CTF CTF的前世今生CTF竞赛中的挑战和难题CTF竞赛必备知识CTF竞赛中的技巧与策略: 写在末尾 主页传送门:📀 传送 CTF的前世今生 CTF(Capture The Flag)是一种网络安全竞赛,旨在测试参与者解决各种网络安全问…

HTML中Input elements should have autocomplete attributes的解决方案

kwfwservice.php:1 [DOM] Input elements should have autocomplete attributes (suggested: “current-password”): (More info: https://goo.gl/9p2vKq) <input name"password" id"password" lay-verify"required" placeholder"密码&…

AI赋能的3D资产管理

推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 想象一下&#xff0c;作为一名视频游戏设计师&#xff0c;你希望在游戏中使用 3D 龙模型。 以前&#xff0c;你可以通过两种方式执行此操作&#xff1a; 自己制作复杂的 3D 模型或从多个角度拍摄龙模型的照片。前往 3D 模…

Git_03_暂存工作区的修改/自由切换分支

# 保存当前未commit的代码 > git stash # 保存当前未commit的代码并添加备注 > git stash "备注内容" # 列出stash的所有记录 > git stash list # 应用最近一次的stash > git stash apply # 删除stash的所有记录 > git stash clear1.查看工作区的改动…

敏捷发布列车初探3 ---- Agile Release Train

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 敏捷发布列车四、联通客户五、规划工作五、创造价值六、获取反馈七、持续改进总结 敏捷发布列车 敏捷发布列车&#xff08;ART&#xff09; 是一个由敏捷团队组成的…

5+铜死亡+单基因泛癌生信思路

今天给同学们分享一篇铜死亡单基因泛癌的生信文章“Pan-cancer integrated bioinformatics analysis reveals cuproptosis related gene FDX1 is a potential prognostic and immunotherapeutic biomarker for lower-grade gliomas”&#xff0c;这篇文章于2023年2月7日发表在F…

Spring 学习(九)整合 Mybatis

1. 整合 Mybatis 步骤 导入相关 jar 包 <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><dependency>…

PASCAL数据集说明

文章目录 一.PASCAL数据集简介1.图像分割 一.PASCAL数据集简介 Pascal VOC2012数据集主要是针对视觉任务中监督学习提供标签数据&#xff0c;它有四个大类别&#xff0c;可以细分为二十个小类别&#xff1a; Person&#xff1a;personAnimal&#xff1a;bird, cat, cow, dog,…

9月25日,每日信息差

今天是2023年9月27日&#xff0c;以下是为您准备的18条信息差 第一、苹果向法国监管机构提交iPhone 12软件更新&#xff0c;解决辐射超标问题 第二、“双节”期间&#xff0c;北京全市预计接待游客1283万人次&#xff0c;中秋国庆“双节”长假将至&#xff0c;北京市民和游客…

Appium+python+unittest搭建UI自动化框架

阅读本小节&#xff0c;需要读者具备如下前提条件&#xff1a; 掌握一种编程语言基础&#xff0c;如java、python等。 掌握一种单元测试框架&#xff0c;如java语言的testng框架、python的unittest框架。 掌握目前主流的UI测试框架&#xff0c;移动端APP测试框架Appium&…

list 模拟与用法

list 用法 list list 模拟 #pragma once #include <assert.h> #include "ReverseIterator.h"namespace sjy {//链表节点template <typename T>struct __list_node{__list_node(const T& val T()):_prev(nullptr), _next(nullptr), _val(val){}/*…

xcode15下载ios17模拟器失败

升级到xcode15后需要安装ios17模拟器 但是在下载过程中会遇到报错 如下图这种 网上搜索了一下发现有人遇到过无法下载的问题&#xff0c;并且在apple官网也有人提出类似问题 https://developer.apple.com/forums/thread/737648 解决方案就是从https://developer.apple.com/do…

【iOS】使用respondsToSelector方法前是否需要对方法调用者进行判空操作?

前情 在iOS开发中&#xff0c;经常需要将事件传递给上层代理去处理&#xff0c;这个时候会用到『respondsToSelector』去检测上层代理是否有实现对应的方法&#xff0c;如果实现了&#xff0c;才会去调用。 - (void)methodExample {if ([self.delegate respondsToSelector:se…

Anaconda创建虚拟环境的常见命令

在Anaconda中&#xff0c;可以使用conda命令来创建和管理虚拟环境。以下是使用Anaconda创建虚拟环境的一些常见命令&#xff1a; 创建虚拟环境&#xff1a;使用命令conda create --name <虚拟环境名称>来创建一个新的虚拟环境&#xff0c;例如&#xff1a;conda create -…

【C++】stack queue

stack & queue 一、容器适配器二、deque&#xff08;了解&#xff09;三、stack1. stack 的介绍2. 模拟实现 stack 四、queue1. queue 的使用2. 模拟实现 queue3. priority_queue&#xff08;1&#xff09;priority_queue 的介绍&#xff08;2&#xff09;priority_queue 的…

[Linux]多线程编程

[Linux]多线程编程 文章目录 [Linux]多线程编程pthread_create函数pthread_join函数pthread_exit函数pthread_cancel函数pthread_self函数pthread_detach函数理解线程库和线程id Linux操作系统下&#xff0c;并没有真正意义上的线程&#xff0c;而是由进程中的轻量级进程&#…

Python二级 每周练习题20

练习一: 日期计算器 设计一款日期计算程序&#xff0c;能否实现下面的功能&#xff1a; (1)要求用户分别输入年、月、日&#xff08;分三次输入&#xff09;&#xff1b; (2)程序自动会根据输入的年月日计算出这一天是这一年的第几天&#xff1b; (3)输出格式为&#xff1a;这…

超全超详细的Redis笔记-数据类型及其使用、主从复制、哨兵模式、缓存穿透、击穿、雪崩

文章目录 狂神聊Redis1、Nosql概述1.1、为什么要用Nosql1.2、什么是NoSQL1.3、NoSQL的四大分类 2、Redis 入门2.1、概述2.2、Windows 安装2.3、Linux安装2.4、测试性能2.5、Redis基础知识 3、五大基本数据类型3.1、Redis-Key3.2、String3.3、List3.4、Set3.5、Hash&#xff08;…