Chrome에서 웹 작업자를로드 할 수 없습니다.

109

웹 작업자를 사용하는 프로젝트를 진행 중입니다.

내 머리 부분에는이 코드가 있습니다.

var worker = new Worker("worker.js");
// More code

이것은 Safari에서 잘 작동하지만 Chrome은 다음 오류를보고합니다.

Uncaught SecurityError: Failed to create a worker: script at '(path)/worker.js' cannot be accessed from origin 'null'.

Safari에서는 완벽하게 작동하지만 Chrome에서는 작동하지 않는 이유는 무엇입니까? 이 문제를 어떻게 해결합니까?

감사합니다.

javascript  google-chrome  web-worker 
— Progo
소스
1
파일 프로토콜 작업 중입니까? 액세스 플래그를 설정하고 작동하는지 확인하는 경우 : stackoverflow.com/questions/18586921/…
— epascarello 2014 년
1
예, 웹 작업자의 경로는 다음과 같습니다 file:///E:/programming/web/project/worker.js.. 기본 프로젝트의 경로는 다음과 같습니다 file:///E:/programming/web/project/index.html..
— Progo
1
이것을 시도하십시오 : stackoverflow.com/questions/18586921/…
— epascarello 2014 년

답변:

84

Chrome에서는 로컬 파일에서 스크립트를 실행할 때 웹 작업자를로드 할 수 없습니다.

— 노벨 치킨
소스
6
에서 이 대답 , Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.- 변덕에 바로 액세스 파일 시스템에 할 수 있도록 웹 페이지에 대한 냉각 아니에요.
— ChaseMoskal 2014
41
-1 firsfox 당신이있어 제공, 당신은 물론이 작업을 수행하게됩니다 또한 오리진으로 파일을 사용하여 (예를 들어. 당신이 브라우저에서 로컬 파일을보고있는). 깨진 것은 크롬뿐입니다.
— 토마스 Zato - 분석 재개 모니카
3
Firefox는 여전히 작동하지만 (file : //에서 예),이 경우 Chrome은 작동하지 않습니다.
— 악
55

해결 방법을 사용합니다. Chrome은 차단 Worker되지만 <script>. 따라서 범용 솔루션을 만드는 가장 좋은 방법은 다음과 같습니다.

function worker_function() {
    // all code here
}
// This is in case of normal worker start
// "window" is not defined in web worker
// so if you load this file directly using `new Worker`
// the worker code will still execute properly
if(window!=self)
  worker_function();

그런 다음 정상적으로 연결합니다 <script src="...". 함수가 정의되면 다음과 같은 혐오스러운 코드를 사용합니다.

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));
— Tomáš Zato-모니카 복원
소스
이 솔루션은 좋습니다. 왜이 세상에서 완벽한 것은 없습니까? 모든 소프트웨어는 버그, 결함, 유치한 행동 등으로 사용자를 자극하고 있습니다. Firefox는 또한 "clip-path"css 속성을 지원하지 않기 때문에 오만합니다.
— Ĭsααc t ի ε βöss
나는 js 개발자가 아니며 여기서 스크립트 태그 사용의 요점을 얻지 못했습니다. 그리고 창은 무엇입니까! = 자체 검사? 누군가이 로딩 순서를 설명해 주시겠습니까? 고마워.
— Sharun 2017-04-25
스크립트 태그는 HTML과 동일한 디렉토리에있는 경우 Google 크롬에 의해로드됩니다. window!=seld코드가 웹 작업자에서 실행 중인지 확인합니다. 따라서 다른 컨텍스트에서 직접 javascript 파일을로드하는 경우이 코드를 이식 할 수 있습니다.
— Tomáš Zato-Monica 복원
1
@ treeseal7 웹 작업자 컨텍스트에서 실행해야하는 코드입니다.
— Tomáš Zato-Monica 복원
2
이렇게 작성된 워커에서는 importScript를 사용할 수 없습니다. 적어도 추가 해결 방법이 없으면 아닙니다. 따라서 다중 파일 작업자에 대해 더 많은 조작이 필요합니다.
— SlugFiller 2018
41

문제는 Noble Chicken에 의해 제대로 설명되었지만 더 일반적인 해결책이 있습니다. wamp 또는 xamp를 설치하는 대신 Python을 사용하여 프로젝트가 호스팅 된 폴더로 이동하여 다음을 입력 할 수 있습니다.python -m http.server

그저 그 폴더에 실행중인 서버가 있고 localhost에서 연결할 수 있습니다.

— 로버트 파커 스
소스
13
맥은 아마도 함께 갈 필요가있을 것이다 python -m SimpleHTTPServer 8000: 그들은 <파이썬 3로드하고로 (D 또 다른 구글 검색 저장)
— siege_Perilous
3
http-server 노드 모듈을 설치 한 다음 터미널에서 원하는 폴더로 이동하여 'http-server -p 3000'을 실행할 수도 있습니다.
— Huan Zhang
이 스크립트를 언급 할 가치가있는 "python -m http.server"는 Python 3이 필요합니다.
— milesma
또한 시도php -S localhost:8000
— 윌리엄 Entriken에게
29

--allow-file-access-from-files를 사용할 수도 있습니다. 은 크롬을 시작할 때 플래그를.

MacOsX의 예 :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

추가 정보 : Chrome 용 웹 작업자 설정

— Mickaël
소스
Windows 명령 창에서 "C : \ Users \ NAME \ AppData \ Local \ Google \ Chrome SxS \ Application"으로 이동 한 다음 chrome.exe --allow-file-access-from-files를 실행 한 다음 로컬 파일 경로를 복사합니다. 예 : c : \ temp \ myWeb \ index.html 그리고 열린 브라우저의 URL에 붙여 넣습니다.
— milesma
4
바로 가기를 만들고 대상 경로에 플래그를 전달할 수도 있습니다.
— Stephan
1
아, 그리고 연결된 질문에서 플래그로 실행하기 전에 모든 Chrome 창을 닫아야합니다.
— Stephan
네, 다른 옵션은 매니페스트에서 올바른 권한으로 Chrome 확장 프로그램을 코딩하는 것입니다. "permissions": [ "file : // * / *"], 예를 들면 stackoverflow.com/questions/19493020/…
— Mickaël
참고 : " --allow-file-access-from-files플래그를 켜고 열기 전에 Chrome의 모든 창을 닫아야합니다 ." stackoverflow.com/a/21771754/325418에
— nonopolarity
15

보안 제한 때문입니다. 대신 사용 http://하거나 https://프로토콜 을 사용해야 합니다.file:/// .

NodeJS가 설치되어있는 경우 다음을 수행하면됩니다. -이것은 사용 가능한 많은 옵션 중 하나입니다.

로컬 웹 서버 설치

$ npm install -g local-web-server

이제를 통해 콘텐츠에 액세스하려는 모든 폴더에서 사용할 수 있습니다 http.

$ ws

http://localhost:8000(기본 포트 : 8000)으로 이동합니다 .

— 안전한 후세인
소스
6

나는 당신의 게시물과 같은 문제가 있었다. 해결책은 localhost (wamp 또는 xamp)로 실행해야한다는 것입니다. 완료됩니다.

— 타라
소스
와우, 나는 이것을 결코 찾지 못했을 것입니다. 감사합니다! (나는 감사 의견에서 허용되는 희망)
— dcromley
4

또 다른 해결 방법은 Chrome 확장 프로그램에 Google의 웹 서버를 사용하는 것 입니다. 작업 디렉토리를 선택하고 서버를 시작하십시오. 완료!

— 유보
소스
3

Chrome파일을로드하지만 실행할 수 없습니다. 사용 Firefox. 그것은 나를 위해 일하고 있습니다.

— 호신 벤
소스
1
내 반대표를 설명하려면 : 답변으로 제출하는 것보다 브라우저 지원 요구 사항에 대해 더 많이 문의하는 댓글로 시작하는 것이 더 나을 수 있습니다. 사용자가 크로스 브라우저 지원에 대해 이미 말한 것을 고려할 때 대답이 아닐 가능성이 높습니다.
— Thomas Poole 2017
질문을주의 깊게 읽으 셨다면, 당신이 그것을 찬성하기 전에 당신이 3 번으로 반대표를 던지지 않을 것이라고 확신합니다! 사용자가 Chrome이 작업자를로드 할 수 없다고 말합니다. 아니요, Chrome은 작업자를로드 할 수 있지만 실행할 수는 없습니다. 내가 응답으로 넣은 이유는 첫 번째 질문이 1 년 전에 질문되고 두 번째 많은 응답은 Firefox가 작업자를 실행하지 않는다는 것이므로 모두 댓글을 달 수 없습니다. 나는 단지 설명하고 있지만 당신은 반대표 또는 찬성표를 할 권리가 있습니다.
— Hocine Ben
3

크롬에서 로컬 http 서버 를 만드는 쉬운 방법 은 다음과 같습니다.

Chrome 용 웹 서버

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related

기술:

Chrome 용 웹 서버는 HTTP를 사용하여 네트워크를 통해 로컬 폴더의 웹 페이지를 제공합니다. 오프라인으로 실행됩니다. Chrome 용 웹 서버는 Chrome 용 오픈 소스 (MIT) HTTP 서버입니다.

Chrome이 설치된 모든 곳에서 실행되므로 어디로 든 가져갈 수 있습니다. ARM 크롬 북에서도 작동합니다.

이제 다른 컴퓨터가 파일에 액세스 할 수 있도록 로컬 네트워크에서 수신 대기하는 옵션이 있습니다. 또한 인터넷 주소를 얻으려고 시도 할 수 있습니다.

많은 사람들이 이것을 사용하여 크롬 북에서 기본적인 웹 개발을합니다. 또한 컴퓨터간에 로컬 네트워크를 통해 또는 인터넷에서 파일을 공유 할 때도 편리합니다.

설치가 완료되면 http://127.0.0.1:8887로 이동하십시오.

그리고 --allow-file-access-from-files 플래그로 안전하지 않습니다.

— A. 데니스
소스
이것은 놀랍다! 이제 로컬 파일 시스템의 웹 작업자로 reactJS 앱을 실행할 수 있습니다. 훨씬 쉬울 수 없습니다!
— Json
2

Python 2.x가 Python 3.x보다 더 널리 배포됨에 따라 python -m SimpleHTTPServer 8000Mac OS X뿐만 아니라 비슷한 것이 더 일반적으로 적용됩니다. 예를 들어 Cygwin에서 사용하는 데 필요하다는 것을 알았습니다.

장소에두고, 이 예는 챔피언처럼 일했다.

— 샐 프터
소스
2 
function worker_fun(num){
    num ++
    // console.log(num)
    postMessage(num);
    setTimeout(worker_fun.bind(null,num), 500)
}

var w

function startWorker(){
    var blob = new Blob([
        "onmessage = function(e){\
            " + worker_fun.toString() + "\
            worker_fun(e.data.num);}"
    ]);
    var blobURL = window.URL.createObjectURL(blob);
    if (typeof(Worker) != 'undefined'){
        if (typeof(w) == 'undefined'){

            w = new Worker(blobURL);
            w.onmessage = function(event){
                document.getElementById('num').innerHTML = event.data;
            } 
            w.postMessage({
               num:parseInt(document.getElementById('num').innerHTML)})
        }
    }
}


function stopWorker() { 
    w.terminate();
    w = undefined;
}

언급했듯이 크롬은 그것을 지원하지 않습니다. 동일한 파일에 내 작업자를 정의하고 싶습니다. 이것은 id=num500ms마다 요소의 innerHTML에서 발견되는 수를 증가시키는 작업 해결 방법입니다 .

— 도미닉 콜레 사르
소스
1

아마도 이유는 크롬이 로컬 파일에서 스크립트를 실행할 때 웹 워커를로드 할 수 없도록하기 때문입니다. 그리고 내 파이어 폭스에서 코드를 실행하려고 시도합니다.

— 에릭 창
소스
file://Firefox 51.0.1에서 잘 실행되는 Web Workers
— bryc
-6

예, 로컬 파일을로드하는 경우 chorome에서 작동하지 않습니다. 그러나 firefox 브라우저에서는 잘 작동합니다. 그리고 HTML 파일에 아래 코드를 추가해야합니다.

<head>
    <meta charset="UTF-8" />
</head>
— 아난드 비슈와 카르마
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.