vue使用vite配置跨域以及环境配置详解

vue前后端分离开发,配置代理都是绕不开的话题,下面是vite的代理

go 复制代码
server: {
    proxy: {
      '/api': {
      
        target: 'https://api.hello.com',   //代理的服务地址,可以理解为/api等于https://api.hello.com
        secure: true, // 配置https
        changeOrigin: true,  //允许跨域请求
        rewrite: (path) => path.replace(/^\/api/, '')   //重写路径,替换请求地址中的/api 为空
      }
    }
 },

配置后/api就是代理了target配置的地址( http://api.hello.com)后端服务器IP和端口

验证请求

go 复制代码
// 根据接口文档:实际参数获取数据
const mapData = await axios.get('/api/one/data').then(res => res.data)

此时,get请求路径不在是 https://localhost:5173/api/one/data 而是 http://api.hello.com/one/data

到此就可以跨域了。

相关推荐
paopaokaka_luck17 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
SY_FC5 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
爱吃香蕉的阿豪5 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
渣渣盟6 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam7 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录7 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript