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的跨域請求訪問不到呢？但願大牛看到可以幫忙解答，謝謝！

這篇博客是學前端以來的第一篇博客，之後會陸續把學習工做中遇到的問題列出來與你們探討與學習。我相信前端之路，千里之行始於足下。加油~~~~