【五一创作】VUE基础知识——代理服务器-Toy模板网

这篇具有很好参考价值的文章主要介绍了【五一创作】VUE基础知识——代理服务器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

代理方式一

优点

缺点

工作方式

代理方式二

优点

缺点

前言

今天为什么要讲这个vue脚手架的代理呢？

接下来我们先来聊一下cros，相信大家对于这个单词都不会陌生吧！当我们前端请求发生了错误提示这个词的时候，那么基本上就是跨域了。如何解决跨域其实有多种。

今天要讲的主角，vue通过脚手架配置代理服务器，就能够解决我们的这个跨域问题。

如果你的前端应用以及后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 文件中的 devServer.proxy 选项来进行配置。

代理方式一

他是在vue.config.js里配置的，添加如下代码即可完成

devServer：{

proxy:'http://IP:端口号'

}

仅仅这一段代码，就可轻松完成代理配置。

优点

他的配置比较简单，而且请求资源的时候我们直接发送请求到前端端口即可实现

缺点

他的缺点也是比较明显的，他不能够配置多个代理，也是不能够灵活的实现控制请求是否走代理完成请求

工作方式

如果按照上面所属的这种方式配置代理，当我们请求了一个前端不存在的资源的实时，那么这个请求立即转发给服务器。

如果请求的资源前端存在的话，那么他是不会向服务器发送请求的。直接请求前端的资源。

这就是他的特点：优先匹配前端的资源

代理方式二

这种方式他是在vue.config.js里配置的，添加如下代码即可完成

具体编码，我们从官网拿来，添加注释，辅助我们更好理解

module.exports = {
devServer: {
proxy: {
'/api': { // 他是用来匹配所有以‘/api’开头的请求路径，这里开头指的是端口号后面的
target: '<url>', // 代理目标的基础路径
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}

这里要注意，changeOrigin的配置，当他为false的时候，服务器收到的请求投中的host端口是前端服务器的端口，当他为true的时候，服务器收到的请求头中的host就是我们服务端接口地址和端口。

他的默认值就是true