Vue2高级-axios和vue-resource、配置代理服务器（解决跨域问题）

---

一、Axios和vue-resource

Axios使用方法

1. 安装axios：npm i axios
2. 引入：import axios from 'axios'
3. 使用方法：

   axios.get(url).then(
   	response => {
   		console.log('请求成功了',response.data)
   	},
   	error => {
   		console.log('请求失败了',error.message)
   	}
   )
   1
   2
   3
   4
   5
   6
   7
   8

Vue-resource使用方法

1. 安装vue-resource：npm i vue-resource
2. 引入并使用插件：

   //引入插件
   import vueResource from 'vue-resource' 
   //使用插件
   Vue.use(vueResource)
   1
   2
   3
   4

3. 使用方法：

   this.$http.get(url).then(
   	response => {
   		console.log('请求成功了')
   	},
   	error => {
   		console.log('请求失败了')
   	}
   )
   1
   2
   3
   4
   5
   6
   7
   8

二、Vue配置代理服务器

方法一

​ 在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}
1
2
3

说明：

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

方法二

​ 编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
		proxy: {
			'/api1': {// 匹配所有以 '/api1'开头的请求路径
				target: 'http://localhost:5000',// 代理目标的基础路径
				changeOrigin: true,
				pathRewrite: {'^/api1': ''}
			},
			'/api2': {// 匹配所有以 '/api2'开头的请求路径
				target: 'http://localhost:5001',// 代理目标的基础路径
				changeOrigin: true,
				pathRewrite: {'^/api2': ''}
			}
		}
	}
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 （修改源地址为服务器地址）
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080（保留请求地址）
   changeOrigin默认值为true
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

说明：

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

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通