前端vue-cli3解决跨域的方案(配置proxy代理)

浏览器的跨域报错
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中配置请求跨域的问题