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}`]: '',
        },
      },
    },

总结

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

相关文章

  • vue2.0 使用element-ui里的upload组件实现图片预览效果方法

    vue2.0 使用element-ui里的upload组件实现图片预览效果方法

    今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现分页的三种效果

    vue实现分页的三种效果

    这篇文章主要为大家详细介绍了vue实现分页的三种效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue对象的单层劫持图文详细讲解

    Vue对象的单层劫持图文详细讲解

    这篇文章主要介绍了vue2.x对象单层劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • ElementUI如何修改el-cascader的默认样式

    ElementUI如何修改el-cascader的默认样式

    ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
    2023-12-12
  • vue.js语法及常用指令

    vue.js语法及常用指令

    vue.js相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令,希望对大家有所帮助
    2017-10-10
  • 在Vue 3中使用OpenLayers加载GPX数据并显示图形效果

    在Vue 3中使用OpenLayers加载GPX数据并显示图形效果

    本文介绍了如何在Vue 3中使用OpenLayers加载GPX格式的数据并在地图上显示图形,通过使用OpenLayers的GPX解析器,我们能够轻松地处理和展示来自GPS设备的地理数据,需要的朋友可以参考下
    2024-12-12
  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容的实现代码

    这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • axios+Vue实现上传文件显示进度功能

    axios+Vue实现上传文件显示进度功能

    这篇文章主要介绍了axios+Vue上传文件显示进度效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 在vue中,v-for的索引index在html中的使用方法

    在vue中,v-for的索引index在html中的使用方法

    下面小编就为大家分享一篇在vue中,v-for的索引index在html中的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue的过滤器你真了解吗

    Vue的过滤器你真了解吗

    这篇文章主要为大家详细介绍了Vue的过滤器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02

最新评论