XMLHttpRequest가 파일을로드 할 수 없습니다. 교차 오리진 요청은 HTTP에 대해서만 지원됩니다.

다음과 같은 오류가 발생합니다.

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

이전에이 질문에 대한 답변이 있었지만 여전히 내 문제에 대한 해결책을 찾지 못했습니다. chrome.exe --allow-file-access-from-files명령 프롬프트에서 실행 을 시도 하고 파일을 로컬 파일 시스템으로 옮겼지만 여전히 동일한 오류가 발생합니다.

어떤 제안이라도 감사합니다!

개인용 컴퓨터의 코드 편집기에서 HTML 및 Javascript를 작성하고 브라우저에서 출력을 테스트하는 것과 같은 작업을 수행하는 경우에 대한 오류 메시지가 나타날 수 Cross Origin Requests있습니다. 브라우저는 HTML을 렌더링하고 서버를 설정할 필요없이 브라우저에서 Javascript, jQuery, angularJs를 실행합니다. 그러나 많은 웹 브라우저는 사이트 간 공격을 감시하도록 프로그래밍되어 있으며 요청을 차단합니다. 다른 사람이 웹 브라우저에서 하드 드라이브를 읽을 수 있기를 원하지는 않습니다. Javascript를 실행하는 Notepad ++와 jQuery 및 angularJs와 같은 프레임 워크를 사용하여 완벽하게 작동하는 웹 페이지를 만들 수 있습니다. Notepad ++ 메뉴 항목을 사용하여 모든 것을 테스트합니다.RUN, LAUNCH IN FIREFOX. 웹 페이지 생성을 시작하는 훌륭하고 쉬운 방법이지만 레이아웃, CSS 및 간단한 페이지 탐색 이외의 것을 생성하기 시작하면 컴퓨터에 로컬 서버를 설정해야합니다.

내가 사용하는 몇 가지 옵션은 다음과 같습니다.

1. Firefox에서 로컬로 웹 페이지를 테스트 한 다음 호스트에 배포합니다.
2. 또는 : 로컬 서버 실행

Firefox에서 테스트하고 호스트에 배포

1. Firefox는 현재 하드 드라이브에서 제공되는 파일에서 Cross Origin 요청을 허용합니다.
2. 웹 호스팅 사이트는 매니페스트 파일로 구성된 폴더의 파일에 대한 요청을 허용합니다.

로컬 서버 실행

• 컴퓨터에서 Apache 또는 Python과 같은 서버 실행
• Python은 서버가 아니지만 간단한 서버를 실행합니다.

Python으로 로컬 서버 실행

IP 주소 받기 :

• Windows : '명령 프롬프트'를 엽니 다. 모든 프로그램, 액세서리, 명령 프롬프트
• 나는 항상 Command Promptas Administrator. Command Prompt메뉴 항목을 마우스 오른쪽 버튼으로 클릭하고Run As Administrator
• 명령을 ipconfig입력하고 Enter를 누르십시오.
• IPv4 주소를 찾습니다. . . . . . . . 12.123.123.00
• 귀하의 IP 주소도 표시하는 웹 사이트가 있습니다.

Python이없는 경우 다운로드하여 설치하십시오.

'명령 프롬프트'를 사용하여 웹 페이지로 사용할 파일이있는 폴더로 이동해야합니다.

• C : \ 루트 디렉토리로 돌아 가야하는 경우-cd /를 입력하십시오.
• cd Drive : \ Folder \ Folder \ etc를 입력하여 .Html 파일이있는 폴더 (또는 php 등)로 이동합니다.
• 경로를 확인하십시오. 입력 : 명령 프롬프트에서 경로. python이있는 폴더의 경로를 확인해야합니다. 예를 들어 python이 C : \ Python27에있는 경우 나열된 경로에서 해당 주소를 확인해야합니다.
• Python 디렉토리 경로가 경로에 없으면 경로를 설정해야합니다. 유형 : 도움말 경로 및 Enter를 누르십시오. 경로에 대한 도움말이 표시됩니다.
• 다음과 같이 입력하십시오. path c : \ python27 % path %
• % path %는 모든 현재 경로를 유지합니다. 현재 경로를 모두 지우고 싶지 않고 새 경로를 추가하기 만하면됩니다.
• 파일을 제공 할 폴더에서 새 경로를 만듭니다.
• Python 서버 시작 : 유형 : python -m SimpleHTTPServer port여기서 'port'는 원하는 포트의 번호입니다.python -m SimpleHTTPServer 1337
• 포트를 비워두면 기본값은 포트 8000입니다.
• Python 서버가 성공적으로 시작되면 메시지가 표시됩니다.

웹 응용 프로그램을 로컬로 실행

• 브라우저 열기
• 주소 입력란에 다음을 입력합니다. http://your IP address:port
• http://xxx.xxx.x.x:1337 또는 http://xx.xxx.xxx.xx:8000기본값
• 서버가 작동 중이면 브라우저에 파일 목록이 표시됩니다.
• 게재하려는 파일을 클릭하면 표시됩니다.

고급 솔루션

• 통합 된 코드 편집기, 웹 서버 및 기타 서비스를 설치합니다.

Apache, PHP, Python, SQL, Debugger 등을 모두 컴퓨터에 개별적으로 설치 한 다음 모두 함께 작동하도록 만드는 방법을 알아 내거나 이러한 모든 것을 결합한 솔루션을 찾는 데 많은 시간을 할애 할 수 있습니다.

NetBeans IDE와 함께 XAMPP를 사용하는 것을 좋아합니다. User InterfaceApache 및 기타 서비스를 관리하고 통합하기 위해 를 제공하는 WAMP를 설치할 수도 있습니다.

간단한 솔루션

순수한 html / js / css 파일로 작업하는 경우.

이 작은 서버 ( link ) 앱을 크롬에 설치하세요 . 앱을 열고 파일 위치를 프로젝트 디렉터리로 지정합니다.

앱에 표시된 URL로 이동합니다.

편집 : Gulp를 사용하는 더 스마트 한 솔루션

1 단계 : Gulp를 설치합니다. 터미널에서 다음 명령을 실행하십시오.

npm install gulp-cli -g
npm install gulp -D

2 단계 : 프로젝트 디렉터리 내에 gulpfile.js라는 파일을 만듭니다. 그 안에 다음 내용을 복사하십시오.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

3 단계 : 브라우저 동기화 gulp 플러그인을 설치합니다. gulpfile.js가있는 동일한 디렉토리에서 다음 명령을 실행하십시오.

npm install browser-sync gulp --save-dev

4 단계 : 서버를 시작합니다. gulpfile.js가있는 동일한 디렉토리에서 다음 명령을 실행하십시오.

gulp serve

이 오류는 브라우저에서 직접 html 문서를 열기 때문에 발생합니다. 이 문제를 해결하려면 웹 서버에서 코드를 제공하고 localhost에서 액세스해야합니다. Apache 설정이있는 경우이를 사용하여 파일을 제공하십시오. 일부 IDE에는 JetBrains IDE, Eclipse와 같은 웹 서버가 내장되어 있습니다.

Node.Js 설정이있는 경우 http-server를 사용할 수 있습니다 . 실행 만하면 Kirill Fuchsnpm install http-server -g 와 같은 터미널에서 사용할 수 있습니다.http-server C:\location\to\app.

Alan Wells 의 정교한 답변에 추가하려면 빠른 수정이 필요합니다.

로컬 서버 실행

Serve 를 사용하여 컴퓨터의 모든 폴더를 제공 할 수 있습니다.

먼저 명령 줄을 사용하여 제공 할 폴더로 이동합니다.

그때

npx i -g serve
serve

또는 다운로드하여 Serve를 테스트하려는 경우

npx serve

그리고 그게 다야! http : // localhost : 5000 에서 파일을 볼 수 있습니다 .

Web API 프로젝트를 로컬로 배포하는 동안이 오류가 발생했으며 아래에 제공된 URL로만 API 프로젝트를 호출했습니다.

localhost // myAPIProject

오류 메시지가 http : //가 아니라고 말했기 때문에 URL을 변경하고 아래에 주어진 접두사 http를 입력하면 오류가 사라졌습니다.

http : // localhost // myAPIProject

WebStorm Javascript IDE 를 사용하는 경우 브라우저의 WebStorm에서 프로젝트를 열 수 있습니다. WebStorm은 자동으로 서버를 시작하며 이제 허용 / 지원되는 프로토콜 (HTTP)로 파일에 액세스하기 때문에 이러한 오류가 더 이상 발생하지 않습니다.

필요에 따라 다르지만 http://myjson.com 에 JSON을 저장하여 (더미) JSON을 일시적으로 확인하는 빠른 방법도 있습니다 . api 링크를 복사하여 자바 스크립트 코드에 붙여 넣습니다. 비올라! 코드를 배포하려면 코드에서 해당 URL을 변경하는 것을 잊지 마십시오!

프로젝트 폴더를 Xampp 디렉토리의 htdocs에 넣습니다. xampp 제어판을 사용하여 Apache 서버를 시작한 다음 브라우저를 열고 localhost / projectfolder로 이동 한 다음 작동을 시작합니다.