Chromeはウェブワーカーを読み込めません

109

Webワーカーを使用するプロジェクトに取り組んでいます。

私の頭のセクションに私はこのコードを持っています：

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 
— プロゴ
ソース
1
ファイルプロトコルを使用していますか？あなたがアクセスフラグを設定し、それが動作するかどうかを確認する場合：stackoverflow.com/questions/18586921/...
— epascarello
1
はい、ウェブワーカーのパスは次のとおりfile:///E:/programming/web/project/worker.jsです。メインプロジェクトのパスは次のとおりfile:///E:/programming/web/project/index.htmlです。
— プロゴ2014年
1
：このお試しくださいstackoverflow.com/questions/18586921/...
— epascarello

回答:

84

Chromeでは、ローカルファイルからスクリプトを実行するときに、ウェブワーカーを読み込むことができません。

— ノーベルチキン
ソース
6
この答え、Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.-それだけで気まぐれで、あなたのファイルシステムにアクセスできるようにするには、Webページのためのクールではないです。
— ChaseMoskal 14
41
-1 firsfoxは、あなたがしている提供し、あなたはもちろん、これを行うようになるも原点としてファイルを使用して（例えば、ブラウザでローカルファイルを表示しています）。壊れているのはクロムだけです。
— トマーシュZato -復活モニカ
3
Firefoxは引き続き機能します（yes 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'})));
— トマーシュ・ザト-モニカの復活
ソース
このソリューションは良いです。なぜこの世界では完璧なものは何もないのですか？すべてのソフトウェアは、バグ、欠陥、幼稚な行動などでユーザーを動揺させています。Firefoxは、「クリップパス」のcssプロパティのサポートを拒否しているため、傲慢です。
— Ĭsααcトンիεβöss
私はjs開発者ではないので、ここでスクリプトタグを使用する意味がわかりません。そして、ウィンドウは何ですか！=セルフチェック？誰かがこの読み込みシーケンスを説明できますか？どうも。
— Sharun 2017
スクリプトタグは、HTMLと同じディレクトリにある場合、Google Chromeによって読み込まれます。window!=seldコードがWebワーカーで実行されているかどうかを確認します。これにより、JavaScriptファイルを他のコンテキストで直接ロードする場合に備えて、このコードが移植可能になります。
— トマーシュ・ザト-モニカの復活2017年
1
@ treeseal7 Webワーカーコンテキストで実行する必要があるコード。
— トマーシュZato -復活モニカ
2
このように書かれたワーカーからimportScriptを使用できないことに注意してください。少なくとも、追加の回避策がないわけではありません。したがって、マルチファイルワーカーには改ざんがさらに必要になります。
— SlugFiller
41

問題はNoble Chickenによって適切に説明されていますが、より一般的な解決策があります。wampまたはxampをインストールする代わりに、Pythonを使用して、プロジェクトがホストされているフォルダーに移動し、次のように入力できます。python -m http.server

それだけで、localhostから到達可能な、そのフォルダで実行中のサーバーができます。

— ロバート・パーカス
ソース
13
Macはおそらくpython -m SimpleHTTPServer 8000<Python 3がロードされているので（別のGoogle検索を保存するためだけに：D）
— siege_Perilous
3
また、http-serverノードモジュールをインストールし、ターミナルから目的のフォルダーに移動して、「http-server -p 3000」を実行することもできます。
— Huan Zhang
このスクリプト "python -m http.server"にはPython 3が必要です
— Milema '18
また試してくださいphp -S localhost:8000
— William Entriken
29

Chromeの起動時に--allow-file-access-from-filesフラグを使用することもできます。

MacOsXの例：

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

詳細：ChromeのWebワーカー設定

— ミカエル
ソース
Windowsコマンドウィンドウで「C：\ Users \ NAME \ AppData \ Local \ Google \ Chrome SxS \ Application」に移動し、chrome.exe --allow-file-access-from-filesを実行して、ローカルファイルパスをコピーしますたとえば、c：\ temp \ myWeb \ index.htmlを開き、開いているブラウザのURLに貼り付けます。
— Milema
4
ショートカットを作成して、ターゲットパスにフラグを渡すこともできます。
— Stephan
1
ああ、そしてリンクされた質問から、フラグで起動する前にすべてのChromeウィンドウを閉じることを忘れないでください。
— ステファン、
「権限」：[「ファイル：// * / *」]、のようにうん、他のオプションもコードにそれがマニフェストだの右権限を使ってChrome拡張することができstackoverflow.com/questions/19493020/...
— ミカエル・
注：「--allow-file-access-from-filesフラグをオンにしてChromeを開く前に、Chromeのすべてのウィンドウを閉じる必要があります。」stackoverflow.com/a/21771754/325418に
— 非極性
15

これは、セキュリティ制限のためです。の代わりにhttp://またはhttps://プロトコルを使用する必要がありますfile:///。

NodeJSがインストールされている場合は、次の操作を行うだけです。 -これは利用可能な多くのオプションの1つであることに注意してください

local-web-serverをインストールする

$ npm install -g local-web-server

これで、を介してコンテンツにアクセスする任意のフォルダで使用できますhttp。

$ ws

移動http://localhost:8000（デフォルトポート：8000）

— 安全なフセイン
ソース
6

私もあなたの投稿と同じ問題を抱えていました。解決策は、それをlocalhost（wampまたはxamp）で実行する必要があることです。できます。

— タラ
ソース
うわー、私はこれを見つけたことはなかったでしょう-ありがとう！（私はコメントで感謝が許さ
— れれば幸いです
3

ローカルファイルの代わりにHTTPプロトコルからのリクエスト用のWebサーバーが必要であり、正しく動作する:)

— アリレザ・アララ
ソース
1
いいえ、必要ありません。主流であるという理由だけでWeb標準に準拠していないブラウザーは無視する必要があります。
— トマーシュZato -復活モニカ
3

Chromeファイルをロードしますが、実行できません。を使用しFirefoxます。それは私のために働いています。

— ホシネベン
ソース
1
私の反対票を説明するには：これは、回答として提出するよりも、おそらくブラウザーのサポート要件について詳しく尋ねるコメントから始める方がよいでしょう。クロスブラウザのサポートについてユーザーがすでに言ったことを考えると、それはおそらく答えではないようです。
— トーマスプール
質問を注意深く読んだ場合は、賛成票を投じる前に回答を3つに反対票を投じないことを確信しています。ユーザーはChromeがワーカーを読み込めないと言っています。いいえ、Chromeはワーカーをロードできますが、実行できません。私がそれを応答として置く理由は、最初の質問が1年前に尋ねられ、2番目の多くの応答は、Firefoxがワーカーを実行していないため、それらのすべてにコメントできないことを示しています。説明しているだけですが、反対票または反対票を投じる権利があります。
— Hocine Ben 2017
3

Chromeでローカルhttpサーバーを作成する簡単な方法は次のアプリです。

Chrome用Webサーバー

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

説明：

Chrome用Webサーバーは、HTTPを使用して、ネットワーク経由でローカルフォルダーからWebページを提供します。オフラインで実行します。Chrome用Webサーバーは、Chrome用のオープンソース（MIT）HTTPサーバーです。

Chromeがインストールされている場所ならどこでも実行できるので、どこにでも持ち運ぶことができます。ARM Chromebooksでも動作します。

ローカルネットワークでリッスンするオプションが追加され、他のコンピューターがファイルにアクセスできるようになりました。さらに、インターネットアドレスを取得しようとします。

多くの人々がこれを使用してChromebookで基本的なWeb開発を行います。また、コンピュータ間のローカルネットワークを介して、またはインターネット上でファイルを共有する場合にも便利です。

インストールしたら、http：//127.0.0.1：8887に移動します

そして、フラグとして安全ではありません--allow-file-access-from-files

— A.デニス
ソース
これは素晴らしいです！これで、ローカルファイルシステムのWebワーカーでreactJSアプリを実行できます。はるかに簡単にすることはできません！
— Json
2

Python 2.xはPython 3.xよりも広く導入されているpython -m SimpleHTTPServer 8000ため、Mac 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

おそらく理由は、ローカルファイルからスクリプトを実行するときに、ChromeでWebワーカーをロードできないためです。そして、Firefoxでコードを実行しようとすると、できません。

— エリック・チャン
ソース
file://Firefox 51.0.1でWebワーカーが正常に動作
— bryc
-6

はい、ローカルファイルを読み込んでいる場合、choromeでは機能しません。しかし、Firefoxブラウザでは問題なく動作します。そして、あなたはHTMLファイルに以下のコードを追加する必要があります。

<head>
    <meta charset="UTF-8" />
</head>
— アナンドヴィシュワカルマ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.