교차 출처 요청은 HTTP에 대해서만 지원되지만 교차 도메인은 아닙니다.

이 코드를 사용하여 AJAX 요청을합니다.

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

하지만 Google Chrome JavaScript 콘솔에서이 오류가 계속 발생합니다.

XMLHttpRequest는 file : /// C : /xampp/htdocs/webname/resources/templates/signup.php를로드 할 수 없습니다. 원본 간 요청은 HTTP에 대해서만 지원됩니다.

문제는 signup.php 파일이 모든 웹 사이트가 실행되는 로컬 웹 서버에서 호스팅되므로 교차 도메인이 아니라는 것입니다.

이 문제를 어떻게 해결할 수 있습니까?

실제로 웹 서버를 실행하고 파일에 대한 get 요청을 작성하는 대신 해당 서버의 URI에 대한 get 요청을 작성해야합니다. 예를 들어 라인을 변경하십시오.

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

다음과 같이 읽으십시오.

    $.get("http://localhost/resources/templates/signup.php",

초기 요청 페이지도 http를 통해 만들어야합니다.

다음 스위치로 크롬을 시작했습니다.

--allow-file-access-from-files

OS x try (붙여 넣기를 복사하는 경우 대시를 다시 입력) :

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

다른 * nix 실행에서 (테스트되지 않음)

 google-chrome  --allow-file-access-from-files

또는 Windows에서 크롬 바로 가기의 속성을 편집하고 스위치를 추가합니다.

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

"대상"경로의 끝까지

작은 프런트 엔드 프로젝트에서 작업 중이고 로컬에서 테스트하려면 일반적으로 웹 브라우저에서 로컬 디렉터리를 지정하여 엽니 다 (예 : file : /// home / erick / mysuperproject / index 입력). URL 표시 줄에 .html. 그러나 사이트에서 리소스를로드하려고하면 로컬 디렉터리에있는 경우에도 다음과 같은 경고가 표시 될 수 있습니다.

XMLHttpRequest는 file : ///home/erick/mysuperproject/mylibrary.js를로드 할 수 없습니다. 원본 간 요청은 HTTP에 대해서만 지원됩니다.

Chrome 및 기타 최신 브라우저는 Cross Origin Requests에 대한 보안 제한을 구현했습니다. 즉, file : ///을 통해 아무것도로드 할 수 없으며 로컬로 인해 동일한 Origin 정책이 있어도 항상 http : // 프로토콜을 사용해야합니다. 간단하게 프로젝트를 실행하려면 웹 서버를 마운트해야합니다.

이것은 세상의 끝이 아니며 좋은 오래된 Apache (다른 여러 프로젝트를 실행하는 경우 VirtualHosts 포함), express가있는 node.js, Ruby 서버 등을 포함하여 많은 솔루션이 있습니다. 브라우저 설정.

그러나 게으른 사람들을위한 더 간단하고 가벼운 솔루션이 있습니다. Python의 SimpleHTTPServer를 사용할 수 있습니다. 이미 파이썬과 함께 제공되므로 아무것도 설치하거나 구성 할 필요가 없습니다!

예를 들어 프로젝트 디렉토리로 이동하십시오.

1 cd / home / erick / mysuperproject 다음 간단히 사용

1 python -m SimpleHTTPServer 그리고 끝났습니다. 터미널에이 메시지가 표시됩니다.

1 0.0.0.0 포트 8000에서 HTTP 제공 ... 이제 브라우저로 돌아가서 http://0.0.0.0:8000제공되는 모든 디렉토리 파일을 방문 할 수 있습니다 . 포트 및 기타 사항을 구성 할 수 있습니다. 설명서를 참조하십시오. 하지만이 간단한 트릭은 내가 새 라이브러리를 테스트하거나 새로운 아이디어를 찾느 라 서두를 때 효과적입니다.

자, 즐거운 코딩 되세요!

편집 : Python 3+에서 SimpleHTTPServer는 http.server로 대체되었습니다. 따라서 예를 들어 Python 3.3에서 다음 명령은 동일합니다.

python -m http.server 8000

페이지를 채우기 위해 JSON 데이터를 사용하는 HTML 파일을로드하려고 할 때 동일한 오류가 발생했기 때문에 node.js를 사용하고 문제를 해결하기 위해 express를 사용했습니다. 당신이 노드가 설치되어 있지 않은 경우, 당신은해야 할 노드를 설치 첫째.

1. Express 설치 npm install express

2. 프로젝트의 루트 폴더에 server.js 파일을 만듭니다. 제 경우에는 서버를 원하는 파일 위에 하나의 폴더가 있습니다.

3. server.js 파일에 다음과 같은 내용을 넣고 express gihub 사이트 에서 이에 대해 읽어보십시오 .

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');
   

4. server.js를 저장 한 후 다음을 사용하여 서버를 실행할 수 있습니다.

node server.js

5. 로 이동하면 http://localhost:8000/FILENAME로드하려는 HTML 파일이 표시됩니다.

nodejs가 설치되어있는 경우 명령 줄을 사용하여 서버를 다운로드하고 설치할 수 있습니다.

npm install -g http-server

파일을 제공하려는 디렉토리로 디렉토리를 변경하십시오.

$ cd ~/projects/angular/current_project 

서버 실행 :

$ http-server 

그러면 Starting up http-server 메시지가 생성됩니다.

사용 가능 : http : // your_ip : 8080 및 http://127.0.0.1:8080

그러면 브라우저에서 다음과 같은 URL을 사용할 수 있습니다.

http : // your_ip : 8080 / index.html

이런 식으로 가장 잘 작동합니다. 두 파일이 모두 서버에 있는지 확인하십시오. html 페이지를 호출 할 때 다음 http:://localhost/myhtmlfile.html과 같은 웹 주소를 사용하십시오 C::///users/myhtmlfile.html. json에 전달 된 URL이 아래에 표시된 웹 주소임을 확인하십시오.

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. chromeLocation 경로를 변경하십시오.

2. 위의 .bat 파일로 저장하십시오.

3. 생성 한 배치 파일에 파일을 끌어다 놓습니다. (크롬은 페이지 복원 옵션을 제공하므로 페이지가 열려 있으면 복원을 누르면 작동합니다).

php 인터프리터를 사용하여 python없이 서버를 시작할 수도 있습니다.

예 :

cd /your/path/to/website/root
php -S localhost:8000

php 유틸리티는 일부 OS (Mac 포함)에 사전 설치되어 제공되므로 npm의 대안을 원할 때 유용 할 수 있습니다.

모든 Python 사용자 :

터미널의 대상 폴더로 이동하기 만하면됩니다.

cd projectFoder

그런 다음 Python3 +의 경우 HTTP 서버를 시작합니다.

python -m http.server 8000

:: 포트 8000 (http : // [::] : 8000 /)에서 HTTP 제공 ...

링크로 이동 : http://0.0.0.0:8000/

즐겨 :)