Vue CLI 3.0 配置项 - 设置接口代理

本文来自 「Vue虚拟实验」的小伙伴  effort，本节内容主要介绍了使用 Vue CLI 创建项目后的一些配置说明。在前面我们有提到过如何不写一行代码可进行跨域测试，这节内容通过配置代理实现跨域。

1、为什么要设置接口代理

看图识字，相信这个提示做过前端的同学应该都有遇到过吧。????

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器

这是来自 Vue CLI 3.0 官方的一句话。在我看来这并不全面，难道前端应用和后端 API 服务在同一台主机上就不会有跨域问题吗？解释这个问题前，我们先了解一个概念同源策略

同源策略

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫三元)