2

I try to fetch some data from an API, I need to authenticate myself with a Bearer Token. When I test my calls to the API with Insomnia or https://reqbin.com/ It works without any problems, when I try to implement the exact same code in my frontend call it will not work.

My Frontend Call:

const options = {
                    method: 'GET',
                    mode: 'no-cors',
                    headers: {
                        "Access-Control-Allow-Origin" : "*",
                        "Authorization": `Bearer ${localStorage.getItem('token')}`
                    }
                };

                fetch('http://somedomain/api/auth/Info', options)
                .then(response => console.log(response.json()))
                .then(response => console.log(response))
                .catch(err => console.error(err));

I get the following errors:
GET http://somedomain/api/auth/Info net::ERR_ABORTED 400 (Bad Request)

I do use svelte so I also get as the error message the following: +page.svelte:21 Uncaught (in promise) SyntaxError: Unexpected end of input (at +page.svelte:21:56) at +page.svelte:21:56

.then(response => console.log(response.json()))
.then(response => console.log(response))
.catch(err => console.error(err));

I also tried it with cors, the error messages are the following:
Access to fetch at 'http://somedomain/api/auth/Info' from origin 'http://127.0.0.1:5173' 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.
GET http://somedomain/api/auth/Info net::ERR_FAILED

Hopefully, someone has an idea of how to fix it. Thanks in advance

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
MxmlnHrc
  • 29
  • 6
  • Could you please try without headers and with CORS? Let me know if it works. – Nurhak Altin Oct 05 '22 at 09:46
  • It still gives the same error when cors is not used. – MxmlnHrc Oct 05 '22 at 10:05
  • Could this error come from the missing https? – MxmlnHrc Oct 05 '22 at 10:28
  • Do you have control over the API or not? If you do, the simplest solution is to add your local dev host to the allowed domains in the CORS configuration on the back-end (i.e. the API). If you *don't*, then you could set up a Svelte endpoint in your app to act as a [proxy](https://stackoverflow.com/questions/70472978/sveltekit-proxy-api-to-avoid-cors) to the API (thus circumventing CORS limitations). – Thomas Hennes Oct 05 '22 at 14:03
  • As for the *why* your request works with Insomnia, Postman or similar services while your browser-based client request does not, [this question](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i?rq=1) on SO will help you ;) – Thomas Hennes Oct 05 '22 at 14:07
  • I use the workaround over Sveltekits endpoints. Thanks for the idea! – MxmlnHrc Oct 06 '22 at 11:47

0 Answers0