XMLHttpRequest Origin null은 file : /// to file : ///에 대한 Access-Control-Allow-Origin이 허용되지 않습니다 (서버리스).

색인 파일을 시작하여 로컬로 다운로드하여 실행할 수있는 웹 사이트를 만들려고합니다.

모든 파일이 로컬에 있으며 온라인에서 리소스가 사용되지 않습니다.

jQuery 용 AJAXSLT 플러그인을 사용하여 XSL 템플릿 (하위 디렉토리에있는)으로 XML 파일을 처리하려고하면 다음 오류가 발생합니다.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

요청한 색인 파일은 file:///C:/path/to/XSL%20Website/index.html사용 된 JavaScript 파일이에 저장되어있는 동안입니다 file:///C:/path/to/XSL%20Website/assets/js/.

이 문제를 해결하려면 어떻게해야합니까?

로컬 웹 서버를 실행하는 것이 옵션이 아닌 경우 file://브라우저 스위치를 통해 Chrome이 파일에 액세스하도록 허용 할 수 있습니다 . 약간의 파기 후, 나는 이 토론을 발견 했다. 다음을 사용하여 Chrome 인스턴스를 실행하십시오.

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

이것은 개발 환경에는 적합하지만 그 밖의 것은 거의 없습니다. 당신은 확실히 이것을 항상 원하지 않습니다. 이것은 여전히 ​​공개 된 문제인 것으로 보입니다 (2011 년 1 월 기준).

참조 : Chrome에서 로컬 파일을 사용하는 jQuery getJSON 문제

본질적 으로이 문제를 해결하는 유일한 방법은 로컬 호스트에서 웹 서버를 실행하고 거기서 호스팅하는 것입니다.

브라우저가 ajax 요청이 컴퓨터의 모든 파일에 액세스하도록 허용하는 것은 안전하지 않으므로 대부분의 브라우저는 "file : //"요청을 " Same Origin Policy " 의 목적으로 원점이없는 것으로 간주합니다.

웹 서버를 시작하는 cd것은 파일이 있고 실행중인 디렉토리에 들어가는 것만 큼 ​​간단 할 수 있습니다 .

python -m SimpleHTTPServer

OSX / Chrome 개발자를 위해 --allow-file-access-from-files 스위치를 켜고 Chrome을 시작하는 Applescript는 다음과 같습니다.

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

이 솔루션을 사용하면 jQuery.getScript ()를 사용하여 로컬 스크립트를로드 할 수 있습니다. 이것은 전역 설정이지만 요청에 따라 crossDomain 옵션을 설정할 수도 있습니다.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

사용에 대한 어떤 자바 스크립트을 FileReader의 로컬 파일, 즉 열 기능 :

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

이제 Choose file버튼을 클릭하고 파일을 찾습니다file:///C:/path/to/XSL%20Website/data/home.xml

이 제한을 무시하려면 크롬을 시작하십시오 open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Josh Lee의 의견 에서 파생 되었지만 Google 파티션 (Parallels)에서 Chrome이 열리지 않도록 Chrome의 전체 경로를 지정해야했습니다.

방금 해결 한 방법은 XMLHTTPRequest를 전혀 사용하지 않고 대신 별도의 자바 스크립트 파일에 필요한 데이터를 포함시키는 것입니다. (제 경우에는 https://github.com/kripken/sql.js/ 와 함께 사용할 바이너리 SQLite Blob이 필요했습니다. )

나는라는 파일을 만들었고 base64_data.js( btoa()필요한 데이터를 변환하고 그것을 <div>복사 할 수 있도록 삽입하는 데 사용 되었습니다 )

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

그런 다음 일반 자바 스크립트와 같이 html에 데이터를 포함시킵니다.

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

JSON을 읽고 XML을 읽도록 수정하는 것이 쉽지 않을 것이라고 생각합니다. 나는 그것을 독자를위한 연습으로 남겨 둘 것이다;)

당신은 퍼팅 시도 할 수 있습니다 'Access-Control-Allow-Origin':'*'에서 response.writeHead(, {[here]}).

'크롬 앱용 웹 서버'를 사용하십시오. (실제로 PC에 그것을 가지고 있는지 여부는 알 수 있습니다. cortana에서 검색하십시오!). 파일을 열고 '파일 선택'을 클릭하여 파일이 들어있는 폴더를 선택하십시오. 실제로 파일을 선택하지 마십시오. 파일 폴더를 선택하십시오 선택한 다음 '폴더 선택'버튼 아래의 링크를 클릭하십시오.

파일로 이동하지 않으면 파일 이름을 ur에 추가하십시오. 이처럼 :

   https://127.0.0.1:8887/fileName.txt

크롬 용 웹 서버 링크 : 클릭