source

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

manysource 2023. 8. 18. 22:46

XMLHttpRequest Origin null은 파일:///(서버리스)에 대해 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/.

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

로컬 웹 서버를 실행하는 것이 옵션이 아닌 경우에는 Chrome 액세스를 허용할 수 있습니다.file://파일을 검색할 수 있습니다.좀 더 파고든 후에, 저는 이 토론을 발견했는데, 그것은 오프닝 포스트에서 브라우저 스위치를 언급하고 있습니다.다음을 사용하여 Chrome 인스턴스 실행:

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

이것은 개발 환경에 허용될 수 있지만, 그 외에는 거의 없습니다.당신은 확실히 이것을 항상 켜는 것을 원하지 않습니다.이 문제는 여전히 해결되지 않은 문제로 보입니다(2011년 1월 기준).

참고 항목: jQuery getJ 관련 문제Chrome에서 로컬 파일을 사용하는 SON

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

브라우저가 Ajax 요청이 컴퓨터의 모든 파일에 액세스할 수 있도록 허용하는 것은 안전하지 않습니다. 따라서 대부분의 브라우저는 "File://" 요청을 "Same Origin Policy"의 목적으로 출처가 없는 것으로 간주합니다.

웹 서버 시작은 다음과 같이 단순할 수 있습니다.cd파일이 있는 디렉터리에 입력하고 실행합니다.

python -m http.server

[Python3에서 업데이트되었음을 알려준 @alexcete 편집]

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

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

Javascript 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

여기 OSX/Chrome 개발자들을 위해 --allow-file-access-from-files-from-files 스위치를 켠 상태에서 Chrome을 실행할 애플 스크립트가 있습니다.

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 &"

이 제한을 무시하려면 chrome을 실행합니다.open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

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

제가 방금 작업한 방법은 XMLHTTPRequest를 전혀 사용하지 않고 별도의 Javascript 파일에 필요한 데이터를 포함하는 것입니다.(의 경우 https://github.com/kripken/sql.js/) 에서 사용할 이진 SQLite BLOB가 필요했습니다.

는 라는파일만니다라는 을 만들었습니다.base64_data.js 사용됨)btoa()▁a▁it에 것.<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]}).

'크롬 앱용 웹 서버'를 사용합니다.(알든 모르든 실제로 컴퓨터에 저장되어 있습니다. 그냥 코타나로 검색하세요!)파일을 열고 '파일 선택'을 클릭하여 파일이 들어 있는 폴더를 선택합니다. 실제로 파일을 선택하지 마십시오. 파일 폴더를 선택한 다음 '폴더 선택' 단추 아래의 링크를 클릭합니다.

파일로 이동하지 않으면 파일 이름을 urs에 추가합니다.다음과 같이:

   https://127.0.0.1:8887/fileName.txt

Chrome용 웹 서버 링크: 클릭

로컬에서만 파일에 액세스해야 하는 경우 파일에 대한 정확한 경로를 포함할 수 있습니다.

../images/img.jpg

사용하다

C:/Users/username/directoryToImg/img.jpg

CORS가 발생하는 이유는 변경하지 않는 디렉토리의 직접 경로를 포함하여 웹 페이지 내의 다른 디렉토리로 이동하려고 하기 때문입니다.

언급URL : https://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-allow-origin-for-file