0

I am using Quagga JS scanner and trying to fetch the barcode resulted from operation with the barcode.monster API.

But i'm getting an error called "opaque" and have status 0. Any idea what is it?

Website : https://barcode.monster/api/

  Quagga.onDetected(function(data) {
// //Once barcode detecterd, fetch from barcode.monster
  
fetch('https://barcode.monster/api/' + data.codeResult.code, {
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/json',
  }})
.then(response => console.log(response))
.catch((error) => {
  console.error('Error:', error);
});


  console.log("This is the scanner output: " + data.codeResult.code);
  Quagga.stop();
  })

If i try response.json() I will get an error which says Unexpected end of input on the line where the json method is located.

Also, if i try with text() method, I get a blank result.

So far I was playing with the link and did not figure out. Studied some Fetch documentation, because I'm a beginner.

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
body: null
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""

The above text is the response...

esqew
  • 42,425
  • 27
  • 92
  • 132
daniel sas
  • 257
  • 2
  • 9

1 Answers1

0

But i'm getting an error called "opaque"...

opaque is not an error, it's a type of response. This is because you're calling the endpoint with mode: no-cors. This behavior is well-documented, and discussed at length in this SO thread. From the linked MDN page (emphasis mine):

no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.

As there doesn't seem to be any CORS-related security headers on the endpoint in question (at least during my cursory analysis of it), you should be able to change your script to use cors mode (unless you really, really need it specifically set to another value, and understand the implications of the mode you need) and the response should flow through normally.

esqew
  • 42,425
  • 27
  • 92
  • 132