vue项目联调使用localhost控制台显示504错误

最近作完了一个Vue项目，遇到了这个问题，查阅了不少大佬的博客，问题千回百转终于解决。博主前端小白，技术有限，有错误请大佬们指出。

我使用的是vue-cli脚手架搭建的一个vue小项目，前端代码部分已经完成，要将static目录下的mock文件中的json数据删除。本来程序运行在localhost：8080端口，要将target的值改成php服务器运行的localhost：80端口。这样就存在跨域请求。在config文件夹下的index.json文件中修改配置项，以下图：

打开php的内置服务器：

vue项目中修改了config文件后重启项目，npm run dev/npm run start，504错误就出现了：

504：网关超时。可是，经过在浏览器中输入http://localhost/api/index.json是能够显示出数据的。当时就去找网上相关的帖子，尝试过在更改两头端口号以及将index.js中的locahost:80更改成127.0.0.1：80也不起做用。这里，要说明下localhost正确解释是本地服务器。127.0.0.1指本机地址或者本机服务器，windows自动将localhost解析为127.0.0.1。我在index.js中修改了target值，依然是504错误能够看出，localhost：80和127.0.0.1：80都是发送了请求的。最后回来认真查看错误缘由时才想到:网关超时，客户进程必定是发出了请求，可是没有获得php服务器响应，那么问题是在php服务器端。

因而从新设置了php服务器地址：

直接设置成127.0.0.1：80，没必要通过一次地址解析。重启项目后就能正常访问服务器端数据了。

注意，在index.json中的target: 'http://localhost'和target: 'http://127.0.0.1'都能访问到服务器端的数据了。但有1个疑问，为何php服务器运行在localhost:80端口，vue的跨域请求访问不到呢？但愿大牛看到可以帮忙解答，谢谢！

这篇博客是学前端以来的第一篇博客，之后会陆续把学习工做中遇到的问题列出来与你们探讨与学习。我相信前端之路，千里之行始于足下。加油~~~~