Cross-origin trouble

ListenBrainz
, , ,
1

Hey there, I’m messing about trying to make some api requests, but having a bit of trouble with cross-origin requests - I wondered if I’m just missing something or if there are any common issues here?

Background, I’ve got a local copy of listenbrainz-server running on localhost, and I’m trying to get the most recent track as a start with a simple fetch:

let url = "http://localhost/1/user/my_username/listens?count=1";
fetch(url, {
      mode: "no-cors",
      headers: { 
        'Authorization': "Token <my_local_token>",
        "Content-Type": "application/json;charset=UTF-8"
      },
    }) 
.then(function(data) {
    console.log(data)
})
.catch(function() {
  console.log("that didn't work")
});

I’ve played around with a few different configurations here (no-cors etc) but to no avail. Strangely, if I request this via something like postman I get the correct result back - so I’m convinced I must just be missing something obvious…

Some of the issue here I guess is that the request is coming from a different port (8000), but I’m guessing I should still be able to do this?

It either throws an error:

Access to fetch at 'http://localhost/1/user/my_username/listens?count=1' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Or with no-cors the response I get is:

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}

with a warning:

header.js:27 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost/1/user/my_username/listens?count=1 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Thanks in advance if anyone’s able to shed some light!

1 Like