Possible CORS error when trying to utilize package in angular project

[bee-mcc]

Hello:

I am currently trying to use tesseract-wasm in an angular project, but I am running in to some issues when deploying the requisite files from the package alongside my distribution files. The following error is thrown:

main.js:1 ERROR Error: Uncaught (in promise): SecurityError: Failed to construct 'Worker': Script at 'file:///Users/usr/Documents/VICSR/VICSR_PoC/node_modules/tesseract-wasm/dist/tesseract-worker.js' cannot be accessed from origin 'http://localhost:8080'.

This occurs when I try to run the following method:

import { OCRClient } from 'tesseract-wasm';

ocr!: OCRClient;

...

  async doOcr(file: File) {
    // Fetch document image and decode it into an ImageBitmap.
    this.image = await createImageBitmap(file);

    // Initialize the OCR engine. This will start a Web Worker to do the
    // work in the background.
    this.ocr = new OCRClient();

    try {
      // Load the appropriate OCR training data for the image(s) we want to
      // process.
      await this.ocr.loadModel(
        'https://raw.githubusercontent.com/tesseract-ocr/tessdata_fast/main/eng.traineddata'
      );

      await this.ocr.loadImage(this.image);

      // Perform text recognition and return text in reading order.
      const text = await this.ocr.getText();

      console.log('OCR text: ', text);
    } catch (e) {
      console.log(e);
    } finally {
      // Once all OCR-ing has been done, shut down the Web Worker and free up
      // resources.
      this.ocr.destroy();
    }
  }

I got the preceding code from one the examples in this project. This is what my distribution folder looks like:

My initial thought is that I have to somehow point the code to use the files included in my dist directory, but I'm unsure how to do so. Does anyone have any thoughts?

[robertknight]

It looks to me like the web page is being loaded from http://localhost:8080, but the scripts on the page are being served from a file:// URL. Due to browser security restrictions, the tesseract-worker.js file needs to be served from the same origin (the "http://localhost:8080" part of the URL) as the web page itself.

By default the URL of tesseract-worker.js is determined from the URL of the JavaScript bundle that the OCRClient class has been packaged into. However you can override it using the workerURL option: new OCRClient({ workerURL: 'http://localhost:8080/path/to/tesseract-worker.js' }). There is also a wasmBinary option which you can use to specify he path to the .wasm files.

[bee-mcc]

This did the trick! Thank you very much for the help.

[Dyz2017]

邮件已经收到了^_^

[Shushu-Yan]

这是来自QQ邮箱的假期自动回复邮件。你好，我是紫妍。你的邮件已收到，谢谢！

[SaadAtef-web]

?

…

On Thu, 29 Dec 2022 at 2:08 AM Dyz ***@***.***> wrote: 邮件已经收到了^_^ — Reply to this email directly, view it on GitHub <#66 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQWD6SO7JT6GFF2HBHCTJOLWPTJARANCNFSM6AAAAAASZ4ZFQM> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>