vue跨域怎么解决?

本文主要解决vue中如何解决跨域问题,和如何配置多个代理?

本文用的代理是用vue脚手架提供的:Vue官网文档地址

方法一(单个代理)
  在vue.config.js文件中添加如下配置:

//开启代理服务器-->保持和服务器端口号一致
	//方式1:只能配置一个服务器端口
	devServer: {
	   proxy: 'http://localhost:5000'
	 },

说明:
   1.优点:配置简单,请求资源时直接发给前端(8080)即可。
   2.缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
   3.工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)

方法二(多个代理)
  在vue.config.js文件配置具体代理规则:

module.exports = {
		devServer: {
			proxy: {
				// 请求头随便写,但是请求数据的地方保持一致
				'/api1': {
					//请求的url
					target: 'http://localhost:5000',   
					//正则转换,因为请求数据库的时候会把请求头带进去/api1
					pathRewrite:{'^/api2':''},   
					ws: true,   //用于支持websocket
					changeOrigin: true
				},
				'/api2': {
					target: 'http://localhost:5001',
					pathRewrite:{'^/api2':''},
					ws: true,  //用于支持websocket
					changeOrigin: true
				}
			}
		}
	}

 

/*
   changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
   changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
   changeOrigin默认值为true
 */

 说明:
  1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理.
  2.缺点:配置略微繁琐,请求资源时必须加前缀.

如何在vue文件中用:

 

methods: {
	AddgetUser() {
		// 在这加代理请求头/api1（为什么代理要加正则,就是因为请求的时候会把请求头带进球）
		//因为已经加代理了,所以请求头/api1在8080/后面,代理已经走了http://baidu:8080
		 axios.get('http://baidu:8080/api/students').then(
			response => {
			  console.log('请求成功', response.data)
			},
			error => {
			  console.log('请求失败', error.message)
			}
				)
			},
			getUser() {
				// 在这加代理请求头/api1
				axios.get('http://baidu:8080/api1/cars').then(
					response => {
						console.log('请求成功', response.data)
					},
					error => {
						console.log('请求失败', error.message)
					}
				)
			}
		}