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

Mashiane

Expert
Licensed User
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.

B4X:
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.

B4X:
'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

B4X:
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.

 
Last edited:

alwaysbusy

Expert
Licensed User
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):

1614317596012.png


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:

1614318031769.png


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
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
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


Thanks.
 
Upvote 0

alwaysbusy

Expert
Licensed User
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
 
Last edited:
Upvote 0
Top