在Vue應用程式中使用vue-resource時出現「Not allowed to load local resource: file:///xxx」怎麼辦？

Vue.js是一款流行的前端框架，許多人都會在專案中使用Vue.js。在Vue.js開發中，我們經常使用vue-resource這個外掛程式來進行非同步請求操作。然而，當我們在本機環境下使用vue-resource，在控制台中可能會出現「Not allowed to load local resource: file:///xxx」這個錯誤提示。下面就來詳細介紹一下這個問題的解決方案。

首先，我們要了解造成這個錯誤的原因。這是因為瀏覽器的安全機制限制了本機檔案系統上的檔案不能直接存取。 Vue的應用程式運行在本機檔案系統中的HTML檔案中，而非同步請求時使用了本機檔案的路徑。因此，瀏覽器會認為這是惡意請求，然後進行攔截。

針對這個問題，我們可以採取兩種不同的解決方式，具體如下：

1. 啟動本機伺服器

在Vue.js的開發中，我們一般使用npm指令來啟動本機伺服器，例如"npm run serve" 指令。啟動本機伺服器後，Vue.js應用程式就可以在本機伺服器上執行，而不是在我們的本機檔案系統中。這樣，我們就可以避免瀏覽器的安全機制限制並使用vue-resource這個外掛程式來進行非同步請求操作。

如果你是使用的vue-cli建立的項目，則可以在命令列中輸入「npm run serve」來啟動本機伺服器。啟動後在瀏覽器中開啟 localhost:8080 這個位址，在頁面中進行vue-resource方法的呼叫即可。

2. 使用HTTP協定

如果我們依舊希望在本機檔案系統中執行Vue.js應用，並且不想啟動本機伺服器，我們可以使用HTTP協定來進行非同步請求操作。

我們可以使用以下兩種方式來使用HTTP協定：

(1) 修改非同步請求路徑：

我們可以透過修改非同步請求路徑來使用HTTP協定。例如，我們可以把請求位址http://localhost:8080/mockData.json 改為http://127.0.0.1:8080/mockData.json，並且在瀏覽器中開啟http://127.0.0.1:8080 而不是使用file:// 協定。

(2) 使用Chrome瀏覽器的--allow-file-access-from-files標記。

我們可以使用Chrome瀏覽器的--allow-file-access-from-files標記來允許瀏覽器存取本機檔案系統。要注意的是，這個標記只適用於Chrome瀏覽器。

在Windows作業系統中，我們需要在命令提示字元(cmd)中輸入以下命令：

chrome.exe --allow-file-access-from-files

在MacOS作業系統中，我們需要開啟終端機並輸入以下命令：

open -a Google Chrome --args --allow-file-access-from-files

如果你使用的是其他瀏覽器，你需要查詢該瀏覽器對應的允許本機檔案系統的設定方式。

總的來說，在Vue.js的開發中，我們可以避免"Not allowed to load local resource: file:///xxx" 這個錯誤。如果你希望在本機檔案系統中執行Vue.js應用，你可以使用HTTP協議，或是在命令列中輸入「npm run serve」指令來啟動本機伺服器，或是在使用Chrome瀏覽器時使用--allow-file -access-from-files標記。這些方法都可以允許我們使用vue-resource這個外掛程式進行非同步請求操作。

以上是在Vue應用程式中使用vue-resource時出現「Not allowed to load local resource: file:///xxx」怎麼辦？的詳細內容。更多資訊請關注PHP中文網其他相關文章！