浏览器的跨域报错
vue-cli2和cli3解决跨域的方法是有区别的,在这个点上绕了不少弯,proxyTable/proxy
其实方法很简单,重点在手动创建的根目录里vue.config.js的proxy配置,vue.config.js里的配置项都是可选的,我们只需要配置自己需要的部分就可以。
1. 修改vue.config.js
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8080',
proxy: {
'/api': {
target: 'https://www.sprouter.net', // 请求服务器根路径,这里必须加上 http/https://
changeOrigin: true, // 是否跨域
ws: true, // websocket
pathRewrite: { // 重写路径: 当检测到请求地址里包含 /v1 时,将此路径进行跨域代理操作
'^/api': '/api'
}
}
}
}
2. 修改main.js中axios请求根路径
import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = '/'
3. 发送请求
this.$axios.post('/api/v1/get_token', this.loginForm).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
参考链接:
vue-cli proxyTable中跨域中pathRewrite 怎么用
关于vue-cli3中配置请求跨域的问题