Vue 애플리케이션에서 vue-resource를 사용할 때 '로컬 리소스 로드가 허용되지 않음: file:///xxx'가 나타나면 어떻게 해야 합니까?

Vue.js는 널리 사용되는 프런트 엔드 프레임워크이며 많은 사람들이 프로젝트에서 Vue.js를 사용합니다. Vue.js 개발에서는 종종 vue-resource 플러그인을 사용하여 비동기 요청 작업을 수행합니다. 하지만 로컬 환경에서 vue-resource를 사용할 경우 콘솔에 "로컬 리소스 로드가 허용되지 않습니다: file:///xxx"라는 오류 메시지가 나타날 수 있습니다. 이 문제에 대한 해결책을 자세히 소개하겠습니다.

먼저 이 오류의 원인을 이해해야 합니다. 이는 브라우저의 보안 메커니즘이 로컬 파일 시스템의 파일에 대한 직접 액세스를 제한하기 때문입니다. Vue 애플리케이션은 로컬 파일 시스템의 HTML 파일에서 실행되며 로컬 파일의 경로는 비동기 요청에 사용됩니다. 따라서 브라우저는 이를 악의적인 요청으로 간주하고 차단합니다.

이 문제를 해결하기 위해 다음과 같은 두 가지 솔루션을 채택할 수 있습니다.

1. 로컬 서버 시작

Vue.js 개발에서는 일반적으로 npm 명령을 사용하여 로컬 서버를 시작합니다. npm run Serve" 명령을 실행합니다. 로컬 서버를 시작한 후 Vue.js 애플리케이션은 로컬 파일 시스템 대신 로컬 서버에서 실행될 수 있습니다. 이러한 방식으로 브라우저 보안 메커니즘 제한을 피하고 vue-resource 플러그인을 사용하여 비동기 요청 작업을 수행할 수 있습니다.

vue-cli를 사용하여 프로젝트를 생성한 경우 명령줄에 "npm run submit"을 입력하여 로컬 서버를 시작할 수 있습니다. 시작 후 브라우저에서 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 개발에서는 "로컬 리소스 로드가 허용되지 않음: file:///xxx" 오류를 피할 수 있습니다. 로컬 파일 시스템에서 Vue.js 애플리케이션을 실행하려면 HTTP 프로토콜을 사용하거나, 명령줄에 "npm run Serve" 명령을 입력하여 로컬 서버를 시작하거나, 다음과 같은 경우 --allow-file을 사용할 수 있습니다. Chrome 브라우저 -access-from-files 플래그를 사용합니다. 이러한 방법을 사용하면 vue-resource 플러그인을 사용하여 비동기 요청 작업을 수행할 수 있습니다.

위 내용은 Vue 애플리케이션에서 vue-resource를 사용할 때 '로컬 리소스 로드가 허용되지 않음: file:///xxx'가 나타나면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!