解决vue-element-admin中配置跨域出现的问题

 更新时间:2024年07月24日 15:30:26   作者:曦和百里  
这篇文章主要介绍了解决vue-element-admin中配置跨域出现的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-element-admin配置跨域问题

首先来看一下项目结构目录

我们可以看到.env.development和.env.production文件以及vue.config.js

这里是涉及到了接口的转发(我们可以看到base,base的意思是所有的请求前缀都会加上它)

重点来了(如何配置跨域)

 proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:3000/',
        ws: true,
        changeOrigin: true,
        pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }
      }
    }
  • target:是我要跨域的地址。
  • changeOrigin:开启跨域
  • pathRewrite:匹配到所有含有当前环境所对应的前缀的接口进行转发

坑来了(这真的是留了好大一个坑,之前查了好久,后来无意间解决了)

在.env.development和.env.production文件中

如果你的#base api和VUE_APP_BASE_API=api

这两个地方不对应的话,那么你就不能够实现我所截图的跨域配置,我之前的配置的都是手动去改,这个坑解决了之后何其优雅,只需要更改当前是开发还是生产环境就好了

  • 更改:
lintOnSave: process.env.NODE_ENV === 'development'
  • 或者:
lintOnSave: process.env.NODE_ENV === 'production'

这处就能够去自动匹配了,之前都是要改好几个地方,这样子显得比较优雅。

原因是没有检索到这个前缀

总结

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

相关文章

  • 关于delete和Vue.delete的区别及说明

    关于delete和Vue.delete的区别及说明

    这篇文章主要介绍了关于delete和Vue.delete的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • element多个表单校验的实现

    element多个表单校验的实现

    在项目中,经常会遇到表单检验,在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法,感兴趣的可以了解一下
    2021-05-05
  • Vue实现全局的toast组件方式

    Vue实现全局的toast组件方式

    这篇文章主要介绍了Vue实现全局的toast组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue实现网页首屏加载动画及页面内请求数据加载loading效果

    Vue实现网页首屏加载动画及页面内请求数据加载loading效果

    Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue布置导航守卫获取用户信息

    Vue布置导航守卫获取用户信息

    这篇文章主要为大家介绍了Vue布置导航守卫获取用户信息,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue项目展示pdf文件的方法实现

    vue项目展示pdf文件的方法实现

    本文主要介绍了vue项目展示pdf文件的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • VUE-ElementUI 时间区间选择器的使用

    VUE-ElementUI 时间区间选择器的使用

    这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 基于vue 动态菜单 刷新空白问题的解决

    基于vue 动态菜单 刷新空白问题的解决

    这篇文章主要介绍了基于vue 动态菜单 刷新空白问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解如何使用Vuex实现Vue后台管理中的角色鉴权

    详解如何使用Vuex实现Vue后台管理中的角色鉴权

    最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    这篇文章主要介绍了vue3.0封装轮播图组件的步骤,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03

最新评论