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

개인용 컴퓨터의 코드 편집기에서 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를 설치할 수도 있습니다.

답변

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

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]);
});

npm install browser-sync gulp --save-dev

gulp serve

npx i -g serve
serve

npx serve