Can't access API from JavaScript: CORS failed "It does not have HTTP ok status"

[gremo]

I've allowed all possible origins, methods and headers (these are headers ent by the server):

Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *

<script type="module">
  fetch('https://docs.example.com/api/submissions', {
    headers: { 'X-Auth-Token': 'mytoken' },
  }).then(res => res.data);
</script>

Curl works fine. Any idea?

Maybe it's an issue with the OPTIONS method? See https://stackoverflow.com/questions/52047548/response-for-preflight-does-not-have-http-ok-status-in-angular?

When you access your back-end with Postman, you are only sending a GET. The browser will send an OPTIONS request first (without your authentication header), and look for the response to have an "Access-Control-Allow-Origin" header that matches the origin of the page making the request.

If the response to the OPTIONS request is not a 2xx, or the header is not present, or the header value does not match the requesting page's origin, you will get the error that you are experiencing, and the GET request will not be made.

TLDR; change your back-end to not require authentication for the OPTIONS method when handling the login url.

[omohokcoj]

@gremo REST API is not designed to be used on the client side js in the browser. By passing 'X-Auth-Token' in your Javascript you'll expose it to the users of your app. Instead you need to use DocuSeal REST API on your server side and return the data to authorized users

[gremo]

@omohokcoj thanks for the clarification, it was a quick test to get an overview of the API from the browser 😄