vite/Vuecli配置proxy代理解决跨域问题

 更新时间:2023年12月29日 08:54:22   作者:williamyi74  
这篇文章主要介绍了vite/Vuecli配置proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite/Vuecli配置proxy代理解决跨域

上代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 9090,
    strictPort: true, // 严格端口 true:如果端口已被使用,则直接退出,而不会再进行后续端口的尝试。
    /**
     * @description 解决chrome设置origin:*也跨域机制,代理/api前缀到服务基地址
     * 最终的地址会将axios设置的baseUrl:/dev代理拼接成[target][/dev][/xxx/yyy]
     */
    proxy: {
      '/dev': {
        target: 'http://www.baidu.com', // 接口基地址
        rewrite: path => {
          console.log(path); // 打印[/dev/xxx/yyy] 这就是http-proxy要请求的url,如果服务器真实地址是没有/dev前缀的话要replace掉,如果有可以不replace
          return path.replace(/^\/dev/, '');
        }
      }
    }
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, '.', 'src') // 设置 @ 指向 src
    }
  },
})

Vuecli配置

devServer: {
    port: '9090',
    proxy: {
      [process.env.VUE_APP_PREFIX]: {
        target: process.env.VUE_APP_BASEURL,
        secure: true,
        changeOrigin: true,
        pathRewrite: {
          [`^${process.env.VUE_APP_PREFIX}`]: '',
        },
      },
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+ts使用Map内置对象方式

    vue3+ts使用Map内置对象方式

    文章介绍了JavaScript中的Map对象及其相关方法,包括设置和获取值、判断键是否存在、清空Map、删除指定元素和使用forEach方法遍历,此外,文章还对比了Map和对象在键类型和顺序上的区别
    2025-11-11
  • 详解Vue.js中的组件传值机制

    详解Vue.js中的组件传值机制

    Vue.js 是一款流行的前端框架,它提供了一些方便的机制来管理组件之间的通信,其中包括组件传值,本文将详细介绍 Vue.js 中的组件传值机制,包括父子组件传值、兄弟组件传值、跨级组件传值等多种方式,需要的朋友可以参考下
    2023-08-08
  • vue3实现对自定义组件自由拖动效果

    vue3实现对自定义组件自由拖动效果

    在数据可视化看板开发中,组件的自由拖拽功能能极大提升交互体验,本文将基于Vue3生态,从零开始解析如何实现一个支持自由拖拽的容器组件,感兴趣的朋友一起看看吧
    2025-04-04
  • el-popover如何通过js手动控制弹出框显示、隐藏

    el-popover如何通过js手动控制弹出框显示、隐藏

    最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue3.0实现复选框组件的封装

    vue3.0实现复选框组件的封装

    这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue中的数据驱动解释

    Vue中的数据驱动解释

    这篇文章主要为大家介绍了Vue中的数据驱动解释,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue router学习之动态路由和嵌套路由详解

    vue router学习之动态路由和嵌套路由详解

    本篇文章主要介绍了vue router 动态路由和嵌套路由,详细的介绍了动态路由和嵌套路由的使用方法,有兴趣的可以了解一下
    2017-09-09
  • Vue3实现虚拟列表的示例代码

    Vue3实现虚拟列表的示例代码

    虚拟列表是一种优化长列表渲染的技术,它可以在保持流畅性的同时,渲染大量的数据,本文主要介绍了如何通过Vue3实现一个虚拟列表,感兴趣的可以了解下
    2024-11-11
  • vue 禁止重复点击发送多次请求的实现

    vue 禁止重复点击发送多次请求的实现

    本文主要介绍了vue 禁止重复点击发送多次请求的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Vue3的definePros和defineEmits使用及说明

    Vue3的definePros和defineEmits使用及说明

    Vue3中的defineProps和defineEmits是组合式API的一部分,用于定义组件的props和事件,defineProps简化了props的定义和类型安全,而defineEmits则用于声明和触发组件的自定义事件,确保事件名称的类型安全
    2025-10-10

最新评论