vue-element-admin - 配置接口请求，跨域，版本4

最新推荐文章于 2023-09-10 00:50:05 发布

栈狮

最新推荐文章于 2023-09-10 00:50:05 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue.js node.js javascript

本文链接：https://blog.youkuaiyun.com/yy6818/article/details/120497332

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在Vue-element-admin项目中如何配置接口请求以解决跨域问题，主要通过修改.env.development文件和vue.config.js文件实现。首先，在.env.development中清空VUE_APP_BASE_API，然后在vue.config.js中设置proxy代理，指定目标接口地址并启用相关选项。同时，提供了在utils/request.js中使用接口的例子，包括GET和POST请求。确保接口可访问后，重新编译项目以应用配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-element-admin - 配置接口请求，跨域，版本4

网上常规方法是这么说的，修改.env.development，然后就Ok

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://111.11.111.11'

但是我失败了，然后找到了proxy代理

第一步，还是修改这个文件.env.development

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = ''

第二步，修改vue.config.js

vue-element-admin - 配置接口请求，跨域，版本4

//先注释掉mock
 // before: require('./mock/mock-server.js')
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://11.1111.11.1`,
        changeOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
    }

首先要确保访问的接口可以访问

第三步，utils/request.js,使用

TIP:get传值用params,post传值用data

//获取管理员信息
export function getAdminInfo(params) {
  return request({
    url: "/admin/setting/admin/info",
    method: "get",
    params
  });
}

//添加管理员
export function addAdmin(data) {
  return request({
    url: "/admin/setting/admin/add",
    method: "post",
    data
  });
}

修改过config文件记得重新编译项目