十四、【VUE-CLI】配置代理服务器

十四、配置代理

1、请求回顾

1. xhr ( 原生ajax，XMLHttpRequest [ 注：老IE滚球 ! 懒得提都 ! ] )
2. jQuery ( $.ajax，$.post，$.get )
3. axios ( 用它！ )
4. fetch
5. vue-resource（Vue的插件库，但是年久失修，基本不用）

   1. 安装：npm i vue-resource

   2. vue-resource是Vue的插件库，引入使用 Vue.use(xxx)

   3. vm和vc上多了 $http 说明引入成功了
      4.

   4. 使用：和axios用法一毛一样this.$http.get('xxx').then(...)

---

2、先拉个请求试试

1、CODE

<template>
	<div>
		<button @click="getStudents">获取保安信息</button>
	</div>
</template>

<script>
    // 引入 axios
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
                // get请求（小伙伴自己起个服务器吧~）
				axios.get('http://localhost:8080/baoan/getBao').then(
                    // 成功
					response => {
						console.log('请求成功了',response.data)
					},
                    // 失败
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		}
	}
</script>

小伙伴们自行起服务啊，小白在这打个样儿~

2、Result

3、分析一波

1、为什么会出现这个问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）

2、跨域是什么

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	请求url	是否跨域	原因
http://www.test.com/	http://www.test.com/bao.js	否	同源
http://www.test.com/	https://www.test.com/bao.js	跨域	协议不同(http/https)
http://www.test.com/	https://www.peiqi.com/	跨域	主域名不同(test.com/peiqi.com)
http://www.test.com/	https://qiaozhi.test.com/	跨域	子域名不同(www/qiaozhi)
http://www.test.com:8080/	http://www.test.com:8090/	跨域	端口号不同(8080/8090)

3、原因已经很明显了！

4、如何解决？

1. cors（ 真正意义上的解决跨域 · 后端修改，暂不考虑 ）
2. jsonp（只能解决get请求问题而且麻烦前后端都要处理）
3. 配置代理服务器（选它！！！）
   1. Nginx
   2. vue-cli

---

4、脚手架配置代理服务器（方式一）

通过修改 webpack 默认配置开启代理服务器

这里用到的配置项是： devServer.proxy里提供的第一种方式，开始修改 vue.config.js文件

module.exports = {
    // 开启代理服务器（方式一）
    devServer: {
        proxy: 'http://localhost:8080' // 配置要代理的服务器地址(只写到端口号即可)
    }
}

加上上述配置然后重启，脚手架就帮你开启了一个代理服务器，你的所有请求它会代你转发到 8080服务器，记得更改页面上的请求地址端口号哦！

---

5、方式一代理修复问题代码

1、CODE

<template>
	<div>
		<button @click="getStudents">获取保安信息</button>
	</div>
</template>

<script>
    // 引入 axios
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
                // get请求（小伙伴自己起个服务器吧~）
				axios.get('http://localhost:8081/baoan/getBao').then(
                    // 成功
					response => {
						console.log('请求成功了',response.data)
					},
                    // 失败
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		}
	}
</script>

2、Result

---

6、方式一代理的潜在问题

代理服务器会优先返回本地有的资源，本地没有才会去请求其代理的服务器，这样就有一个潜在问题，如果 “baoan” 这个文件，那么会直接返回这个资源，而不会去请求其代理的服务器返回服务器上的资源

而且这种方式你只能配置一个代理服务器，且不能灵活控制到底走不走代理

1、项目结构（文件内就一句话：我是假保安！）

2、CODE

<template>
	<div>
		<button @click="getStudents">获取保安信息</button>
	</div>
</template>

<script>
    // 引入 axios
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
                // get请求（小伙伴自己起个服务器吧~）
				axios.get('http://localhost:8081/baoan').then(
                    // 成功
					response => {
						console.log('请求成功了',response.data)
					},
                    // 失败
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		}
	}
</script>

3、Result

---

7、脚手架配置代理服务器（方式二）

通过修改 webpack 默认配置开启代理服务器

这里用到的配置项是： devServer.proxy里提供的第二种方式，解决了方式一的潜在问题，开始修改 vue.config.js文件

module.exports = {
    // 开启代理服务器（方式一）
    /* devServer: {
      proxy: 'http://localhost:8080' // 配置要代理的服务器地址(只写到端口号即可)
    } */

    // 开启代理服务器（方式二）
    devServer: {
        proxy: {
          '/api': { // '/api' 是代理前缀，把这个前缀加到页面的请求的端口号后面才会走这个代理服务器，名字随意
            target: 'http://localhost:8080', // target 配置要代理的服务器地址(只写到端口号即可)
            pathRewrite: {'^/api': ''}, // 官网未展示此属性，可选，功能：替换请求字段的（否则请求也会带上前缀）
            ws: true, // 可选，用于支持 websocket （默认true）
            changeOrigin: true // 可选，是否更改请求源，用于控制请求头中的host值（客户端请求的服务器的域名和端⼝号），true更改为请求服务器的地址，false暴露真实源地址 （默认true）
          },
          '/peiqi': {
            target: 'http://localhost:8090'
          }
        }
      }
  }

---

8、方式二多服务代理

1、CODE

<template>
	<div>
		<button @click="getStudents">获取保安信息</button>
		<button @click="getPeiqi">获取佩奇信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				console.log('===获取保安信息:')
				axios.get('http://localhost:8081/api/baoan/getBao').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getPeiqi(){
				console.log('===获取佩奇信息:')
				axios.get('http://localhost:8081/peiqi/getPeiqi').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

又开启一个服务！

2、Result

---

9、vue脚手架配置代理总结

1、方法一

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

devServer:{
  proxy:"http://localhost:8080"
}

说明：

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

2、方法二

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

module.exports = {
   devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:8080',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:8090',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8081
   changeOrigin默认值为true
*/

说明：

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