使用vue-admin-template 中跨域问题解决

最新推荐文章于 2025-06-08 09:05:41 发布

weixin_30634661

最新推荐文章于 2025-06-08 09:05:41 发布

阅读量4.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 后端开发工具 ViewUI

原文链接：http://www.cnblogs.com/quepq/p/10658385.html

本文介绍如何在前端项目中设置跨域请求，并通过配置proxyTable实现接口代理，包括修改环境配置文件、设置代理目标地址及路径重写等关键步骤。

1、修改dev.env.js 中的文件

例如：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"/admin"', //这个地方格局需要配置你接口前缀名称
})

2、在index.js 中设置 proxyTable

proxyTable: {
  '/admin': {     //这里是公共部分，在调用接口时后面接不相同的部分，/admin就相当于http://192.168.0.199:8926/admin这一段
    target: 'http://www.newpay.com/',   //这里写的是访问接口的域名和端口号
    changeOrigin: true, // 必须加上这个才能跨域请求
    pathRewrite: {  // 重命名
      '^/admin': ''
    }
  }
},

3、main.js中 注释这一行，防止示例请求

//import '../mock' // simulation data


4、login.js中修改如下

export function login(username, password) {
  return request({
    url: '/admin/login/index',  //注意，这一段要加上前缀admin
    method: 'post',
    data: {
      username,
      password
    }
  })
}