[JavaScript知识库]Vue-cli解决跨域问题

在Vue.config.js里面配置跨域解决方案

方法一：

1.修改脚手架里面的 vue.config.js 文件

	// 开启代理服务器
	devServer: {
		proxy: 'http://localhost:8888'
	}

2. 服务端的请求文件
get请求要发给代理服务器，所以url地址应该填代理服务器的地址
代理服务器地址和客户端的地址一样

	axios.get('http://localhost:8080').then(
	 response => {
	 	console.log('请求成功了',response.data)
	 },
	 error => {
	 	console.log('请求失败了',error.message)
	 }
)

问题： 请求的资源如果代理服务器就有，就不会向8888端口发送请求，直接请求代理服务的资源，代理服务资源就是public文件夹下的资源8080的根路径

方法二：

同样在vue.config.js里面配置代理

devServer: {
	proxy: {
		'/api': {
			target: 'http://localhost:8888',
			// 匹配所有的以/api开头的换成 ''
			pathRewrite: { '^/api':''},
			ws: true,  // 用于支持websocket
			changeOrigin: true, // 伪装同源
			
		}
	}
}

客户端:

axios.get('http://localhost:8000/api/home').then(
	response => {
		console.log('请求成功了', response.data)
	},
	error => {
		console.log('请求失败了', error.message)
	}
)