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

到此就可以跨域了。

相关推荐
哆啦A梦158816 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长17 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH17 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据18 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年19 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una20 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年20 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js20 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ21 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办21 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js