B4J Question BANanoFetch: [SOLVED] How to fix preflight CORS error without having to use a browser plugin?

[Mashiane]

Ola

I'm trying to access a REST API and the only way that it works for now is if I have a plugin on the google browser to bypass the CORS error and return my data.

From the understanding of how CORS works, this is implemented at the browser level to validate and beef up security.

The error I am getting is.

Access to XMLHttpRequest at 'https://api.sigfox.com/v2/devices/' from origin 'https://localhost' 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.

For the header, I only need to pass basic authorization.

'set authorization for this connection
Sub BasicAuthorization(username As String, password As String) As Map
    Dim usernamepassword As Object = BANano.ToBase64($"${username}:${password}"$)
    Dim basic As String = $"Basic ${usernamepassword}"$
    Dim m As Map = CreateMap()
    m.Put("Authorization", basic)
    Return m
End Sub

This is my code

Dim hdr As Map = BasicAuthorization(una, pwd)
    '
    options.Initialize
    options.Method = "GET"
    options.Headers = hdr
    '
    fetch.Initialize("https://api.sigfox.com/v2/devices/", options)
    BANano.Await(fetch)
    fetch.Then(response)
    fetch.Return(response.json)
    fetch.Then(data)
    Log(data)
    fetch.Else(error)
    Log(error)
    fetch.End

So I pass my username and password here. I understand this is due to a missing, "Access-Control-Allow-Origin: *"

How can I fix this so that I dont have to use a browser plugin?

Thanks

PS: I am able to get the data from the REST API when this browser plugin is installed and activated.

Allow CORS: Access-Control-Allow-origin

Easily add (Access-Control-Allow-Origin: *) rule to the response header.

mybrowseraddon.com

 

[alwaysbusy]

a missing, "Access-Control-Allow-Origin: *"

This is a server side directive (e.g. is typically set in something like the .htaccess file in Apache on the server you are making the call to).

This said, a simple Google search quickly reveales the reason and possible solution why you get this CORS error here (from the Sigfox REST API manual):

PS: I do not advice you to use those plugins much. They are a 'hack' and expose all your credentials. Only activiate it 'for a very short time', just enough to do a test and then immediately deactivate it. The plugin makers do say it themselves:

So it works for some development cases (e.g. where the real server has not been fully configured), but not for production and especially not for end-users. You're better of trying to fix the issue at the root.

Alwaysbusy

 

[Mashiane]

Thanks for taking time to look at this. I'm baffled though and perhaps you can help.

If you still remember the manual link you found can you please include it here for me. I downloaded api documentation from their site and also referred to examples that they provided. I didn't see that clause about a reverse proxy.

This is what I have been using

Sigfox Support

support.sigfox.com

Thanks.

 

[alwaysbusy]

Just search for 'sigfox api cors error'. It is all over the place.

 

[Mashiane]

Thanks I found the document. I will contact sigfox support for clarity.

From the look of things a revision of their api took place and that's why I couldn't find that clause and most of the sections in this document are not in the new 18 pager.

 

[Mashiane]

Solution: set the mode to "no-cors"

Phew!

 

[alwaysbusy]

Solution: set the mode to "no-cors"

It may be a 'fix/hack' for your specific case, but is not a general solution. The safe/secure solution would've been a reverse proxy.

mode: 'no-cors' won’t magically make things work. In fact it makes things worse, because one effect it has is to tell browsers, “Block my frontend JavaScript code from looking at contents of the response body and headers under all circumstances.” Of course you almost never want that. You should always try to keep the security at its max.

Most important consequence of doing this is: you can fire off a GET, HEAD or POST request (and only those), but you wont know if it succeeded, failed, or what the response was, and if you POST you can only really encode the request body as a HTML form, or text/plain.

So using 'no-cors' is almost always a mistake.

A good read on this topic: https://evertpot.com/no-cors/

Alwaysbusy

 

[Mashiane]

From the understanding of how CORS works, this is implemented at the browser level to validate and beef up security.

Thanks @alwaysbusy , your comments are noted. Actually with BANanoFetch, it's returning a 401, that's enough a solution for me.

 

[alwaysbusy]

401 error has nothing to do with CORS; it just means that the server chose to not authorize your request because you didn't provide (correct) auth credentials.

 

[alwaysbusy]

Actually, I'm surprised authentication does work (can't see in your code how you do it), but in a normal case, e.g. by using the 'Authorization' in the header, would be stripped by the no-cors mode.