Vue | 基于 vue-admin-template 项目的跨域问题解决方法

目录

一、现存问题

二、解决方法

2.1  修改的第一个地方

2.2  修改的第二个地方

2.3  修改的第三个地方

---

自存

一、现存问题

报错截图如下：

二、解决方法

2.1  修改的第一个地方

在 .env.development 文件中：

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://18.137.108.102:8080' # 修改为服务器地址

2.2  修改的第二个地方

在 vue.config.js 文件中：

module.exports = {devServer: {// before: require("./mock/mock-server.js"),proxy: {"/api": {target: process.env.VUE_APP_BASE_API,changeOrigin: true, // 配置跨域pathRewrite: {"^/api": "",},},},},
}

也就是注释掉原有的 “before” 那一行，然后再添加后面的代码。

2.3  修改的第三个地方

在 /utils/request.js 文件中：

// create an axios instance
const service = axios.create({// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request urlbaseURL: "/api",  // 只需要修改这个位置// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000, // request timeout
});