What should I do if "Not allowed to load local resource: file:///xxx" appears when using vue-resource in a Vue application?

Vue.js is a popular front-end framework, and many people use Vue.js in projects. In Vue.js development, we often use the vue-resource plug-in to perform asynchronous request operations. However, when we use vue-resource in a local environment, the error message "Not allowed to load local resource: file:///xxx" may appear in the console. Let’s introduce the solution to this problem in detail.

First of all, we need to understand the cause of this error. This is because the browser's security mechanism restricts direct access to files on the local file system. Vue applications run in HTML files in the local file system, and the path to the local file is used in asynchronous requests. Therefore, the browser will think that this is a malicious request and intercept it.

To address this problem, we can adopt two different solutions, as follows:

1. Start the local server

Develop in Vue.js , we generally use npm commands to start local servers, such as the "npm run serve" command. After starting the local server, the Vue.js application can run on the local server instead of in our local file system. In this way, we can avoid browser security mechanism restrictions and use the vue-resource plug-in to perform asynchronous request operations.

If you created the project using vue-cli, you can enter "npm run serve" on the command line to start the local server. After startup, open the localhost:8080 address in the browser and call the vue-resource method on the page.

2. Using HTTP protocol

If we still want to run the Vue.js application in the local file system and do not want to start the local server, we can use the HTTP protocol for asynchronous Request action.

We can use the HTTP protocol in the following two ways:

(1) Modify the asynchronous request path:

We can use the HTTP protocol by modifying the asynchronous request path. For example, we can change the request address http://localhost:8080/mockData.json to http://127.0.0.1:8080/mockData.json, and open http://127.0.0.1:8080 in the browser. Instead of using the file:// protocol.

(2) Use the --allow-file-access-from-files flag of Chrome browser.

We can use the Chrome browser's --allow-file-access-from-files flag to allow the browser to access the local file system. Please note that this tag only applies to the Chrome browser.

In the Windows operating system, we need to enter the following command in the command prompt (cmd):

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

In the MacOS operating system, we need to open the terminal and enter the following command:

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

If you are using another browser, you need to check the browser's corresponding setting method to allow local file systems.

In general, in the development of Vue.js, we can avoid the error "Not allowed to load local resource: file:///xxx". If you want to run your Vue.js application on the local file system, you can use the HTTP protocol, or enter the "npm run serve" command on the command line to start the local server, or use --allow-file when using the Chrome browser -access-from-files flag. These methods allow us to use the vue-resource plug-in to perform asynchronous request operations.

The above is the detailed content of What should I do if "Not allowed to load local resource: file:///xxx" appears when using vue-resource in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!