axios与跨域配置结合的使用

axios与跨域配置结合的使用

axios与跨域配置结合的使用

接口路径：/api/inpController/getBeds

前台路径：http://199.199.199.199:3000

后台路径：http://199.199.199.199:8082

配置过程

1. axios的baseUrl必须为代理路径匹配的字符串；
axios.create({
　　baseURL: ‘/api’,
　　timeout: 5000,
　　responseType: ‘json’,
　　withCredentials: true,
});
2.vite.config.js中server配置api的代理
server: {
　　host: ‘localhost’,
　　port: 3000, // 端口号
　　https: false,
　　cors: true, // 默认启用并允许任何源
　　open: true, // 在服务器启动时自动在浏览器中打开应用程序
　　//反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
　　proxy: {
　　　　‘/api’: {
　　　　　　target: ‘http://199.199.199.199:8082’, //代理接口
　　　　　　changeOrigin: true,
　　　　　　ws: true,
　　　　　　secure: true,
　　　　}
　　}
}
3.vue.config.js中devServer配置api的代理
devServer: {
　　host: ‘localhost’,
　　port: 3000, // 端口号
　　https: false,
　　cors: true, // 默认启用并允许任何源
　　open: true, // 在服务器启动时自动在浏览器中打开应用程序
　　//反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
　　proxy: {
　　　　‘/api’: {
　　　　　　target: ‘http://199.199.199.199:8082’, //代理接口
　　　　　　changeOrigin: true,
　　　　　　ws: true,
　　　　　　secure: true,
　　　　}
　　}
}