Chrome tidak dapat memuat pekerja web


109

Saya sedang mengerjakan proyek yang menggunakan pekerja web.

Di bagian kepala saya, saya memiliki kode ini:

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

Ini berfungsi dengan baik di Safari, tetapi Chrome melaporkan kesalahan berikut:

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

Mengapa ini berfungsi dengan sempurna di Safari tetapi tidak di Chrome? Bagaimana cara mengatasinya?

Terima kasih.


1
Apakah Anda menggunakan protokol file? Jika Anda menyetel flag akses dan melihat apakah berfungsi: stackoverflow.com/questions/18586921/…
epascarello

1
Ya, jalan untuk pekerja web ini: file:///E:/programming/web/project/worker.js. Jalan untuk proyek utama adalah ini: file:///E:/programming/web/project/index.html.
Progo

Jawaban:


84

Chrome tidak mengizinkan Anda memuat pekerja web saat menjalankan skrip dari file lokal.


6
Dari jawaban ini , Loading a local file, even with a relative URL, is the same as loading a file with the file: protocol.- dan tidak keren jika halaman web hanya dapat mengakses sistem file Anda dengan cepat.
ChaseMoskal

41
-1 firsfox akan membiarkan Anda melakukan ini tentunya, asalkan Anda juga menggunakan file sebagai origin (misalnya Anda melihat file lokal di browser). Hanya krom yang rusak.
Tomáš Zato - Kembalikan Monica

3
Firefox masih berfungsi (ya dari file: //), Chrome tidak dalam kasus ini.
Jahat

55

Saya menggunakan solusi. Chrome memblokir Workertapi tidak <script>. Karenanya cara terbaik untuk membuat solusi universal adalah ini:

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();

Anda kemudian menautkannya seperti biasa <script src="...". Dan setelah fungsinya ditentukan, Anda menggunakan kode kekejian ini:

new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));

Solusi ini bagus. mengapa di dunia ini tidak ada yang sempurna? Setiap perangkat lunak mengganggu pengguna dengan bug, kekurangan, perilaku kekanak-kanakan dll. Firefox juga sombong karena menolak untuk mendukung properti css "clip-path".
Ĭsααc t ի ε βöss

Saya bukan js dev dan tidak mengerti maksud penggunaan tag skrip di sini. Dan untuk apa window itu! = Self check? Bisakah seseorang menjelaskan urutan pemuatan ini? Terima kasih.
Sharun

Tag skrip akan dimuat oleh google chrome jika berada di direktori yang sama dengan HTML. window!=seldmemeriksa apakah kode berjalan di pekerja web. Ini membuat kode ini portabel jika Anda memuat file javascript secara langsung dalam konteks lain.
Tomáš Zato - Kembalikan Monica

1
@ treeseal7 Kode yang harus dijalankan dalam konteks pekerja web.
Tomáš Zato - Kembalikan Monica

2
Saya harus mencatat bahwa Anda tidak dapat menggunakan importScript dari pekerja yang ditulis seperti ini. Setidaknya, bukan tanpa solusi tambahan. Jadi, Anda memerlukan lebih banyak gangguan untuk pekerja multi-file.
SlugFiller

41

Masalahnya telah dijelaskan dengan baik oleh Noble Chicken tetapi saya memiliki solusi yang lebih umum untuk itu. Alih-alih menginstal wamp atau xamp, dengan python Anda dapat menavigasi ke folder tempat proyek Anda di-host dan mengetik:python -m http.server

Hanya itu dan Anda akan memiliki server yang berjalan di folder itu, dapat dijangkau dari localhost.


13
Mac mungkin perlu digunakan python -m SimpleHTTPServer 8000karena dimuat dengan <Python 3 (hanya untuk menyimpan pencarian google lainnya: D)
siege_Perilous

3
Anda juga dapat menginstal modul node http-server dan kemudian menavigasi ke folder yang diinginkan dari terminal dan menjalankan 'http-server -p 3000'.
Huan Zhang

layak untuk disebutkan skrip ini "python -m http.server" membutuhkan Python 3.
milesma

Coba jugaphp -S localhost:8000
William Entriken

29

Anda juga dapat menggunakan tanda --allow-file-access-from-files saat Anda meluncurkan Chrome.

Contoh untuk MacOsX:

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

Info selengkapnya: Setelan pekerja web untuk chrome


Pada jendela perintah windows, buka: "C: \ Users \ NAME \ AppData \ Local \ Google \ Chrome SxS \ Application", lalu jalankan chrome.exe --allow-file-access-from-files, lalu salin jalur file lokal Anda misal c: \ temp \ myWeb \ index.html dan paste ke url browser yang dibuka, selesai.
milesma

4
Anda juga dapat membuat pintasan dan meneruskan bendera di jalur target.
Stephan

1
Oh, dan dari pertanyaan terkait, ingatlah untuk menutup semua jendela Chrome sebelum meluncurkan dengan bendera.
Stephan

Ya, opsi lain juga dapat menjadi kode Ekstensi Chrome dengan izin yang tepat dalam manifesnya: "izin": ["file: // * / *"], seperti di stackoverflow.com/questions/19493020/…
Mickaël

Catatan: "Anda harus menutup semua jendela Chrome sebelum membukanya dengan --allow-file-access-from-filesbendera aktif." seperti yang dinyatakan di stackoverflow.com/a/21771754/325418
nonopolaritas

15

Itu karena batasan keamanan. Anda perlu menggunakan http://atau https://protokol, bukan file:///.

Jika Anda memiliki NodeJS terinstal, Anda cukup melakukan hal berikut. - Perhatikan bahwa ini adalah salah satu dari banyak opsi yang tersedia

Instal server web lokal

$ npm install -g local-web-server

Sekarang Anda dapat menggunakannya di folder mana pun yang ingin Anda akses isinya http.

$ ws

Arahkan ke http://localhost:8000(port default: 8000)


6

Saya juga mengalami masalah yang sama dengan postingan Anda. Solusinya adalah Anda harus menjalankannya dengan localhost (wamp atau xamp). Itu akan selesai.


Wow, saya tidak akan pernah menemukan ini - terima kasih! (Saya harap terima kasih diperbolehkan dalam komentar)
dcromley


3

Anda memerlukan server web untuk permintaan dari protokol HTTP, bukan file lokal dan berfungsi dengan benar :)


1
Tidak, kamu tidak. Anda perlu mengabaikan browser yang tidak mengikuti standar web hanya karena mereka mainstream.
Tomáš Zato - Kembalikan Monica

3

Chromememuat file tetapi tidak dapat menjalankannya. Gunakan Firefox. Ini bekerja untuk saya.


1
Untuk menjelaskan downvote saya: Ini mungkin lebih baik dimulai dengan komentar, mungkin menanyakan lebih banyak tentang persyaratan dukungan browser mereka, daripada dikirimkan sebagai jawabannya. Sepertinya ini bukan jawaban, mengingat apa yang telah dikatakan pengguna tentang dukungan lintas-browser.
Thomas Poole

Jika Anda telah membaca pertanyaan dengan cermat, saya yakin Anda tidak akan menolak jawaban tiga sebelum Anda memilihnya! Pengguna mengatakan bahwa Chrome tidak dapat memuat pekerja. Tidak, chrome dapat memuat pekerja tetapi tidak dapat menjalankannya. Alasan mengapa saya meletakkannya sebagai tanggapan adalah pertama pertanyaannya diajukan satu tahun yang lalu dan yang kedua banyak tanggapan yang mengatakan bahwa Firefox tidak menjalankan pekerja yang saya tidak dapat berkomentar semuanya. Saya hanya menjelaskan, tetapi Anda berhak menolak atau menyetujui.
Hocine Ben

3

Cara mudah membuat server http lokal di chrome adalah dengan aplikasi ini:

Server Web untuk Chrome

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

Deskripsi:

Server Web untuk Chrome, menyajikan halaman web dari folder lokal melalui jaringan, menggunakan HTTP. Berjalan offline. Server Web untuk Chrome adalah server HTTP open source (MIT) untuk Chrome.

Ini berjalan di mana pun Anda memasang Chrome, sehingga Anda dapat membawanya ke mana saja. Ia bahkan bekerja pada chromebook ARM.

Sekarang memiliki opsi untuk mendengarkan di jaringan lokal, sehingga komputer lain dapat mengakses file Anda. Selain itu, ia dapat mencoba dan mendapatkan alamat internet.

Banyak orang menggunakan ini untuk melakukan pengembangan web dasar di chromebook. Ini juga berguna untuk berbagi file melalui jaringan lokal antar komputer, atau bahkan di internet.

Setelah Anda menginstalnya, navigasikan ke http://127.0.0.1:8887

Dan itu tidak tidak aman sebagai flag --allow-file-access-from-files


Ini luar biasa! Sekarang saya dapat menjalankan aplikasi reactJS saya dengan pekerja web dari sistem file lokal. Tidak bisa lebih mudah!
Json

3

Ini terinspirasi dari jawaban Thomas di atas. Tetapi dengan satu peringatan bahwa saya hanya ingin mendistribusikan HTML, jadi saya secara manual mengonversi js ke dataURL . dan mengaktifkan kotak centang URL data di dalamnya.

const myWorker = new Worker("data:application/x-javascript;base64,b25tZXNzYW...");


2

Dengan Python 2.x yang lebih banyak digunakan daripada Python 3.x, sesuatu seperti python -m SimpleHTTPServer 8000 itu lebih umum diterapkan, dan tidak hanya untuk Mac OS X. Saya merasa perlu untuk digunakan di bawah Cygwin, misalnya.

Dengan itu, contoh ini bekerja seperti seorang juara.


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;
}

Seperti yang disebutkan, chrome tidak mendukungnya. Saya suka mendefinisikan pekerja saya di file yang sama. Ini adalah solusi yang berfungsi yang akan meningkatkan jumlah yang ditemukan di innerHTML dari elemen dengan id=numsetiap 500ms.


1

Kemungkinan alasannya adalah chrome tidak mengizinkan Anda memuat pekerja web saat menjalankan skrip dari file lokal. Dan saya coba jalankan kode di firefox saya, tidak bisa juga.


Pekerja Web berjalan dengan baik file://di Firefox 51.0.1
bryc

-6

Ya, Ini tidak akan berfungsi di chorome jika Anda memuat file lokal. Tapi itu akan bekerja dengan baik di browser firefox. Dan Anda harus menambahkan kode di bawah ini dalam file HTML.

<head>
    <meta charset="UTF-8" />
</head>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.