vue设置axios代理跨域步骤：
//第一步 写request.js文件
import axios from "axios";
const service = axios.create({
baseURL: "/dev-api",
timeout: 5000, // request timeout
});
export default service;
// 第二步 别的地方引入这个文件的时候：import * as user from "./acl/user";
import request from "@/utils/request";
export function login(data){
return request({
url:'/admin/acl/index/login',
method: "post",
data,
})
}
//第二步也可以这样写 别的地方引入这个文件的时候：import * as sku from "@/api/product/sku";
export const reqCancel = (skuId) =>
request({
url: `/admin/product/cancelSale/${skuId}`,
method: "get"
});
//第二步也可以这样写 别的地方引入这个文件的时候：import role from "./acl/role";
export default{
getById(id) {
return request({
url: `/admin/acl/role/get/${id}`,
method: 'get'
})
}
}
//我写这三种引入方式主要是为了区分export和export default等的区别，详细的可以看另一篇文章
//第三步 设置跨域代理 vue.config.js
devServer:{
//配置代理跨域
proxy: {
"/dev-api": {
target: "http://gmall-h5-api.atguigu.cn",
changeOrigin: true,//设置请求地址后，仍然报错，加上这个属性：允许跨域 之后就好了
pathRewrite: { "^/dev-api": "" },//这里是用一个正则，把/dev-api置空了，这样请求路径中就没有/dev-api了
},
},
}
// 第四步 使用：可以直接在.vue文件中引入使用，也可以在vuex中使用，在store文件夹下的js文件中引入
对axios的一些补充:
baseURL:向后台发请求的时候我们可以提前设置一下后台基准的请求地址，这样后面再发请求的时候，只需要写后面的路径就可以了。
把项目运行起来可以看到接口请求的路径为 :http://localhost:9528/dev-api/admin/product/getCategory1
而进行过代理后，实际的请求路径是 ： http://gmall-h5-api.atguigu.cn/admin/product/getCategory1
深入理解代理跨域：为什么会有代理跨域呢，因为当我们是在本地运行项目，但想获取后端服务器的数据，那么前端项目和后端服务器之间就是跨域了，那么就出现了代理跨域这个办法，我们通过“代理服务器”来发送请求，那么baseURL就不写服务器的地址了，我们写/api,然后设置“代理服务器”，在proxy中配置/api，意思是当请求遇到/api的时候就重定向到http://gmall-h5-api.atguigu.cn，这样的话就是服务器向服务器发请求了，
- 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
- 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
- 提前注意点: proxy只限于开发状态下使用
