Chrome ไม่สามารถโหลดผู้ปฏิบัติงานบนเว็บ

ฉันกำลังทำงานในโครงการที่ใช้ผู้ปฏิบัติงานบนเว็บ

ในส่วนหัวของฉันฉันมีรหัสนี้:

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 ฉันจะแก้ไขปัญหานี้ได้อย่างไร

ขอบคุณ.

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

Noble Chicken อธิบายปัญหาได้อย่างถูกต้อง แต่ฉันมีวิธีแก้ปัญหาทั่วไปมากกว่านี้ แทนที่จะติดตั้ง wamp หรือ xamp ด้วย python คุณสามารถไปที่โฟลเดอร์ที่โครงการของคุณโฮสต์อยู่และพิมพ์:python -m http.server

เพียงแค่นั้นคุณก็จะมีเซิร์ฟเวอร์ที่ทำงานอยู่ในโฟลเดอร์นั้นซึ่งเข้าถึงได้จาก localhost

คุณยังสามารถใช้--allow-file-access-from-filesเมื่อคุณเปิด Chrome

ตัวอย่างสำหรับ MacOsX:

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

ข้อมูลเพิ่มเติม: การตั้งค่าผู้ปฏิบัติงานเว็บสำหรับ Chrome

เป็นเพราะข้อ จำกัด ด้านความปลอดภัย คุณจำเป็นต้องใช้http://หรือโปรโตคอลแทนhttps://file:///

หากคุณติดตั้ง NodeJS คุณสามารถทำสิ่งต่อไปนี้ได้ - โปรดทราบว่านี่เป็นหนึ่งในตัวเลือกมากมายที่มีให้

ติดตั้งโลคัลเว็บเซิร์ฟเวอร์

$ npm install -g local-web-server

ตอนนี้คุณสามารถใช้มันในโฟลเดอร์ใด ๆ httpที่คุณต้องการเข้าถึงเนื้อหาผ่าน

$ ws

ไปที่http://localhost:8000(พอร์ตเริ่มต้น: 8000)

ฉันมีปัญหาเดียวกันกับโพสต์ของคุณเหมือนกัน วิธีแก้ปัญหาคือคุณต้องรันด้วย localhost (wamp หรือ xamp) มันจะเสร็จ

วิธีแก้ปัญหาอื่นคือใช้เว็บเซิร์ฟเวอร์ของ Google สำหรับส่วนขยายChrome เลือกไดเร็กทอรีงานของคุณและเริ่มเซิร์ฟเวอร์เสร็จสิ้น!

คุณต้องมีเว็บเซิร์ฟเวอร์สำหรับการร้องขอจากโปรโตคอล HTTP แทนที่จะเป็นไฟล์ในเครื่องและทำงานได้อย่างถูกต้อง :)

Chromeโหลดไฟล์ แต่ไม่สามารถเรียกใช้งานได้ ใช้Firefox. มันทำงานให้ฉัน

วิธีง่ายๆในการสร้างเซิร์ฟเวอร์ http ภายใน chromeคือแอพนี้:

เว็บเซิร์ฟเวอร์สำหรับ Chrome

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

คำอธิบาย:

เว็บเซิร์ฟเวอร์สำหรับ Chrome ให้บริการหน้าเว็บจากโฟลเดอร์ในเครื่องผ่านเครือข่ายโดยใช้ HTTP ทำงานแบบออฟไลน์ เว็บเซิร์ฟเวอร์สำหรับ Chrome เป็นเซิร์ฟเวอร์ HTTP แบบโอเพนซอร์ส (MIT) สำหรับ Chrome

ทำงานได้ทุกที่ที่คุณติดตั้ง Chrome คุณจึงสามารถพกพาไปได้ทุกที่ มันยังใช้งานได้กับ ARM chromebooks

ขณะนี้มีตัวเลือกในการฟังบนเครือข่ายท้องถิ่นเพื่อให้คอมพิวเตอร์เครื่องอื่นเข้าถึงไฟล์ของคุณได้ นอกจากนี้ยังสามารถลองและรับที่อยู่อินเทอร์เน็ต

หลายคนใช้สิ่งนี้ในการพัฒนาเว็บขั้นพื้นฐานบน Chromebook นอกจากนี้ยังสะดวกสำหรับการแชร์ไฟล์ผ่านเครือข่ายท้องถิ่นระหว่างคอมพิวเตอร์หรือแม้กระทั่งบนอินเทอร์เน็ต

เมื่อคุณติดตั้งแล้วให้ไปที่http://127.0.0.1:8887

และไม่ปลอดภัยเหมือนแฟล็ก --allow-file-access-from-files

นี่เป็นแรงบันดาลใจจากคำตอบของ Thomas ด้านบน แต่มีข้อแม้อย่างหนึ่งที่ฉันต้องการแจกจ่ายเฉพาะ HTML ดังนั้นฉันจึงแปลง js เป็น dataURLด้วยตนเอง และเปิดใช้งานช่องทำเครื่องหมาย URL ข้อมูลในช่องนั้น

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

ด้วยการที่ Python 2.x ถูกนำไปใช้งานอย่างกว้างขวางกว่า Python 3.x สิ่งที่คล้ายกันpython -m SimpleHTTPServer 8000นั้นสามารถใช้งานได้โดยทั่วไปมากกว่าและไม่ใช่แค่สำหรับ Mac OS X เท่านั้นฉันพบว่ามันจำเป็นสำหรับการใช้งานภายใต้ Cygwin เช่น

ด้วยเหตุนี้ตัวอย่างนี้จึงทำงานเหมือนแชมป์

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

ดังที่กล่าวไว้ chrome ไม่รองรับ ฉันต้องการกำหนดคนงานของฉันในไฟล์เดียวกัน นี่เป็นวิธีแก้ปัญหาที่ใช้งานได้ซึ่งจะเพิ่มจำนวนที่พบใน innerHTML ขององค์ประกอบด้วยid=numทุกๆ 500ms

สาเหตุที่อาจเกิดขึ้นคือ Chrome ไม่อนุญาตให้คุณโหลดผู้ปฏิบัติงานบนเว็บเมื่อเรียกใช้สคริปต์จากไฟล์ในเครื่อง และฉันลองรันโค้ดบน firefox ของฉันก็ไม่สามารถทำได้เช่นกัน

ใช่มันจะไม่ทำงานใน chorome หากคุณกำลังโหลดไฟล์ในเครื่อง แต่มันจะทำงานได้ดีในเบราว์เซอร์ firefox และคุณต้องเพิ่มโค้ดด้านล่างในไฟล์ HTML

<head>
    <meta charset="UTF-8" />
</head>