"원점 간 요청은 HTTP에 대해서만 지원됩니다." 로컬 파일을로드 할 때 오류

3D 모델을 Three.js에로드하려고합니다. JSONLoader 그 3D 모델은 전체 웹 사이트와 동일한 디렉토리에 있습니다.

내가지고있어 "Cross origin requests are only supported for HTTP."오류,하지만 난 그것을 원인이나 해결 방법을하는 건지 모르겠어요.

내 수정 구슬 당신이 중 하나를 사용하여 모델을로드하는 것을 말한다 file://또는 C:/그렇지 않은 같은 오류 메시지에 충실 유지하는,http://

따라서 로컬 PC에 웹 서버를 설치하거나 다른 곳에서 모델을 업로드하고을 사용 jsonp하여 URL을 변경할 수 있습니다http://example.com/path/to/model

원점은 RFC-6454에서 다음 과 같이 정의 됩니다.

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

따라서 파일이 동일한 호스트 ( localhost)에서 시작되었지만 구성표가 다르면 ( http/ file) 다른 원본으로 처리됩니다.

명시 적으로-예, 오류는 브라우저를 직접 가리킬 수 없다는 것을 의미합니다. file://some/path/some.html

브라우저가 로컬 파일을 렌더링 할 수 있도록 로컬 웹 서버를 빠르게 가동시키는 몇 가지 옵션은 다음과 같습니다.

파이썬 2

파이썬이 설치되어 있다면 ...

1. some.html명령을 사용하여 디렉토리를 파일 또는 파일이 있는 폴더로 변경하십시오.cd /path/to/your/folder

2. 다음 명령을 사용하여 Python 웹 서버를 시작하십시오. python -m SimpleHTTPServer

그러면 웹 서버가 시작되어 전체 디렉토리 목록을 호스팅합니다. http://localhost:8000

3. python -m SimpleHTTPServer 9000링크를 제공 하는 사용자 정의 포트 를 사용할 수 있습니다 .http://localhost:9000

이 접근법은 모든 Python 설치에 내장되어 있습니다.

파이썬 3

동일한 단계를 수행하되 대신 다음 명령을 사용하십시오. python3 -m http.server

Node.js

또는보다 반응이 빠른 설정이 필요하고 이미 nodejs를 사용하는 경우 ...

1. http-server입력하여 설치npm install -g http-server

2. some.html삶이 있는 작업 디렉토리로 변경

3. 발행하여 http 서버를 시작하십시오 http-server -c-1

그러면 디렉토리의 파일을 정적 파일로 제공하는 Node.js httpd가 나타납니다. http://localhost:8080

루비

선호하는 언어가 루비라면 ... 루비 신들도 다음과 같이 작동한다고 말합니다.

ruby -run -e httpd . -p 8080

PHP

물론 PHP에도 솔루션이 있습니다.

php -S localhost:8000

Chrome에서는 다음 플래그를 사용할 수 있습니다.

--allow-file-access-from-files

자세한 내용은 여기를 참조하십시오.

오늘 이것에 뛰어 들었다.

다음과 같은 코드를 작성했습니다.

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

...하지만 다음과 같아야합니다.

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

유일한 차이점은 http://두 번째 코드 스 니펫의 부족입니다 .

비슷한 문제가있는 다른 사람들이있는 경우를 대비하여 그것을 제시하고 싶었습니다.

http://localhost대신 URL을로 변경하십시오 localhost. 로컬에서 html 파일을 열면 해당 html 파일을 제공 할 로컬 서버를 만들어야합니다 Web Server for Chrome. 가장 간단한 방법은을 사용하는 것 입니다. 문제가 해결됩니다.

안드로이드 응용 프로그램에서 - 예를 들어, 자바 스크립트를 통해 자산에 대한 액세스를 가질 수 있도록 file:///android_asset/사용 - setAllowFileAccessFromFileURLs(true)온 WebSettings당신이 전화에서 얻을 getSettings()온을 WebView.

사용 http://또는 https://URL을 만들 수

오류 :localhost:8080

해결책 :http://localhost:8080

가장 빠른 방법은 다음과 같습니다 .Windows 사용자의 경우 Firefox 문제 해결에서 파일을 실행하거나 Chrome을 사용하려면 가장 쉬운 방법은 Python 3을 설치 한 다음 명령 프롬프트에서 command python -m http.server 를 실행 한 다음 http : // localhost : 8000 / 그런 다음 파일을 탐색하십시오.

python -m http.server

이 문제를 해결하기위한 3 가지 접근 방식 을 나열하겠습니다 .

1. 매우 가벼운 npm패키지 사용 :을 사용하여 라이브 서버 를 설치하십시오 npm install -g live-server. 그런 다음 해당 디렉토리로 이동하여 터미널을 열고 live-serverEnter 키를 누릅니다 localhost:8080. 페이지가에 제공됩니다 . 보너스 : 기본적으로 핫 리로딩도 지원합니다.
2. Google에서 개발 한 경량 Google Chrome 앱 사용 : 앱을 설치 한 다음 Chrome의 앱 탭으로 이동하여 앱을 엽니 다. 앱에서 오른쪽 폴더를 가리 킵니다. 귀하의 페이지가 제공됩니다!
3. 창에서 Chrome 단축키 수정 : Chrome 브라우저의 단축키를 만듭니다. 아이콘을 마우스 오른쪽 버튼으로 클릭하고 속성을 엽니 다. 속성 편집에서 target에 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"저장. 그런 다음 Chrome을 사용하여을 사용하여 페이지를 엽니 다 ctrl+o. 참고 : 정기적으로 탐색 할 때는이 바로 가기를 사용 하지 마십시오 .

Python 또는 Node.js가없는 Windows 사용자에게는 여전히 가벼운 솔루션 인 Mongoose가 있습니다.

서버 루트가있는 곳으로 실행 파일을 끌어다 놓기 만하면됩니다. 아이콘이 작업 표시 줄에 나타나고 기본 브라우저에서 서버로 이동합니다.

또한 Z-WAMP 는 단일 폴더에서 실행되는 100 % 휴대용 WAMP입니다. 빠른 PHP 및 MySQL 서버가 필요한 경우 옵션입니다.

Mozilla Firefox를 사용하는 경우 문제없이 예상대로 작동합니다.

PS 놀랍게도 IntenetExplorer_Edge는 절대적으로 잘 작동합니다 !!!

VS 코드를 사용하는 사람을위한 쉬운 솔루션

잠시 동안이 오류가 발생했습니다. 대부분의 답변이 효과가 있습니다. 그러나 다른 해결책을 찾았습니다. node.js여기에있는 다른 솔루션 을 다루고 싶지 않고 HTML 파일 (다른 js 파일에서 함수 호출 또는 json api 가져 오기)로 작업하는 경우 Live Server 확장 을 사용하십시오 .

라이브 서버를 쉽게 열 수 있습니다. 그리고 localhost서버를 생성하기 때문에 문제가 해결되고 있습니다. localhostHTML 파일을 열고 편집기를 마우스 오른쪽 버튼으로 클릭하고을 클릭하여 시작할 수 있습니다 Open with Live Server.

기본적으로를 사용하는 http://localhost/index.html대신 사용하여 파일을로드합니다 file://....

편집하다

파일이 필요하지 않습니다 .html. 바로 가기를 사용하여 Live Server를 시작할 수 있습니다.

(alt+L, alt+O)서버를 열고 서버 (alt+L, alt+C)를 중지하려면 누르 십시오. [MAC cmd+L, cmd+O및 cmd+L, cmd+C]

그것이 누군가를 도울 수 있기를 바랍니다 :)

로컬 디렉토리에서 json 파일을 사용하는 브라우저에서 HTML 파일을로드 할 때이 정확한 오류가 발생했습니다. 필자의 경우 정적 콘텐츠를 서버에 허용하는 간단한 노드 서버를 만들어이 문제를 해결할 수있었습니다. 나는 이것에 대한 코드를이 다른 대답에 남겨 두었다 .

미니 서버를 사용하여 localhost에서 이러한 종류의 응용 프로그램을 실행하는 것이 좋습니다 (내장 서버를 사용하지 않는 경우).

다음은 설정 및 실행이 매우 간단한 것입니다.

https://www.npmjs.com/package/tiny-server

나는 그것이 일부 답변에 이미 언급되어 있다고 생각하지만, 완전한 작동 답변 (찾기 및 사용하기 쉽도록)을 약간 수정합니다.

1. https://nodejs.org/en/download/로 이동 하십시오 . nodejs를 설치하십시오.

2. 명령 프롬프트에서 command를 실행하여 http-server를 설치하십시오 npm install -g http-server.

3. index.html/가 있는 작업 디렉토리로 변경하십시오 yoursome.html.

4. 명령을 실행하여 http 서버를 시작하십시오. http-server -c-1

html 파일 이름에 따라 http://localhost:8080 또는로 웹 브라우저를 엽니 다 http://localhost:8080/yoursome.html.

단순히 응용 프로그램을 웹 서버에서 실행해야한다고 말합니다. 크롬과 같은 문제가 있었고 바람둥이를 시작하고 응용 프로그램을 거기로 옮겼습니다.

어. 방금 출처 간 보안 제한으로 인해 dojo / text 플러그인을 사용하는 빌드되지 않은 원격 AMD 모듈을로드하려고 시도하면 실패합니다. (dojo / text에 대한 호출이 빌드 시스템.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

로컬 파일을로드하는 데 한 가지 방법은 프로젝트 폴더 외부가 아닌 프로젝트 폴더에서 파일을 사용하는 것입니다. 프로젝트 예제 파일 아래에 이미지를 생성하는 방식과 유사한 하나의 폴더를 만들고 프로젝트 경로 이외의 완전한 로컬 경로를 사용하는 섹션을 대체하고 프로젝트 폴더 아래에 파일의 상대 URL을 사용하십시오. 그것은 나를 위해 일했다

모두를 위해 MacOS... 간단한 설정 자신의 Chrome 사본에서 이러한 매력적인 기능을 사용 LaunchAgent 를 설정하십시오 ...

를 저장 plist, 이름이 무엇이든 (launch.chrome.dev.mode.plist 예를 들면,) ~/Library/LaunchAgents와 유사한 내용으로 ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

그것 해야 시작시 시작 ...하지만 당신은 터미널 명령을 사용하여 언제든지 그렇게하도록 강제 할 수 있습니다

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

타다! 😎 💁🏻 🙊 🙏🏾

• PHP 용 램프 등을 사용할 수있는 Tomcat과 같은 Java 용 로컬 웹 서버 설치
• 공개적으로 액세스 가능한 앱 서버 디렉토리에 json 파일을 삭제하십시오.

• 

• 앱 서버를 시작하면 localhost에서 파일에 액세스 할 수 있어야합니다

서버없이 정적 로컬 파일 (예 : svg)을로드 할 수 없습니다. 컴퓨터에 NPM / YARN이 설치되어 있으면 " http-server "를 사용하여 간단한 http 서버를 설정할 수 있습니다

npm install http-server -g
http-server [path] [options]

또는 해당 프로젝트 폴더에서 터미널을 열고 "hs"를 입력하십시오. HTTP 라이브 서버를 자동으로 시작합니다.

내 문제와 함께 많은 문제가 있습니다. '/'예 : jquery-1.10.2.js : 8720 XMLHttpRequest가 http : // localhost : xxxProduct / getList_tagLabels /를 로드 할 수 없습니다 . http : // localhost : xxx / Product / getList_tagLabels /

이 문제를 해결하는 데 도움이되기를 바랍니다.

또한 다음 href와 함께 앵커 태그를 사용할 때이 오류 메시지를 다시 만들 수있었습니다.

<a href="javascript:">Example a tag</a>

필자의 경우 태그 포인터를 사용하여 '포인터 커서'를 가져오고 이벤트는 실제로 클릭 이벤트에 대한 일부 jQuery에 의해 제어되었습니다. href를 제거하고 적용되는 클래스를 추가했습니다.

cursor:pointer;

Linux Python 사용자의 경우 :

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

.html파일을 로컬로 실행하고 웹 서버와 함께 제공하지 않으려는 경우 문제가있는 리소스를 인라인으로 사용 가능하게하여 이러한 교차 요청이 처음부터 발생하지 않도록 할 수 있습니다.

.js통해 파일 을 제공하려고 할 때이 문제가 발생했습니다 file://. 내 솔루션은 <script src="...">태그를 로 대체하기 위해 빌드 스크립트를 업데이트하는 것이 었 습니다 <script>...</script>. gulp이를 수행 하는 방법은 다음과 같습니다 .

1. 실행 npm install --save-dev패키지로 gulp, gulp-inline그리고 del.

2. gulpfile.js루트 디렉토리에 a 를 만든 후 다음 코드를 추가하십시오 (파일 경로를 원하는대로 변경하십시오).

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. gulp bundle-for-local빌드 스크립트를 실행 하거나 업데이트하여 자동으로 실행하십시오.

내 사례에 대한 자세한 문제와 해결책을 여기서 볼 수 있습니다 .

코르도바는 이것을 달성합니다. 나는 아직도 코르도바가 어떻게했는지 알 수 없다. shouldInterceptRequest를 거치지도 않습니다.

나중에 로컬에서 파일을로드하는 키는 다음과 같습니다. myWebView.getSettings (). setAllowUniversalAccessFromFileURLs (true);

http 리소스에 액세스하려는 경우 webview는 OPTIONS 메서드를 사용하여 검사를 수행합니다.이 옵션은 응답을 반환하여 WebViewClient.shouldInterceptRequest를 통해 액세스 권한을 부여 할 수 있으며 다음 GET / POST 메서드의 경우 null을 반환 할 수 있습니다.

먼저 모든 크롬 인스턴스를 닫습니다.

그 후에 이것을 따르십시오.

나는 Mac에서이 명령을 사용했다.

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome"-파일 접근 허용 파일

창문 :

"--allow-file-access-from-files"모드에서 Chrome을 사용하여 HTML을 시작하는 방법은 무엇입니까?

오프라인보기를 위해 페이지를 다운로드했을 때 이것을 경험했습니다.

난 그냥를 제거해야 integrity="*****"하고 crossorigin="anonymous"모든로부터 속성 <link>과 <script>태그