Getting around CORS issues for web apps


#1

Hello!

We are trying to make a standalone web app (runs in a browser) that connects and calls the Chai APIs. The APIs do return the appropriate CORS headers except for Access-Control-Allow-Origin which is '*' (or wildcard) which is not allowed in many browsers including all the common ones. Please refer to image below:

The solution is to set Access-Control-Allow-Origin to the requester’s host and port which in this case is http://localhost:8081 so Access-Control-Allow-Origin: http://localhost:8081. We have been trying to do this in Ruby by applying these changes:

https://github.com/chaibio/chaipcr/commit/a83a678eb7c28ab602798460f8e4266cced826b8
https://github.com/chaibio/chaipcr/commit/993590aff8df57ce92d1ca9a5109b40eb1794d8a

to proxy the APIs to the realtime program but we seem to not be able to make any modifications to the Ruby code on the Chai without it failing to start up again.

Steps we took:

  1. Make Ruby code change on Chai (any change to the file including only a comment will do it)
  2. Run systemctl start unicorn.service to restart service
  3. Service refuses to start up. Nothing useful in /var/log/rails.log or /var/log/unicorn.log

Are we missing any steps here? We’re not Ruby/Rails programmers so if there are build steps we are missing please let us know!

Thanks,
Jason


#2

Are you using Angular? please read this stackoverflow

here is the answer on the forum:
The issue stems from your Angular code:

When withCredentials is set to true, it is trying to send credentials or cookies along with the request. As that means another origin is potentially trying to do authenticated requests, the wildcard ("*") is not permitted as the “Access-Control-Allow-Origin” header.

You would have to explicitely respond with the origin that made the request in the “Access-Control-Allow-Origin” header to make this work.

I would recommend to explicitely whitelist the origins that you want to allow to make authenticated requests, because simply responding with the origin from the request means that any given website can make authenticated calls to your backend if the user happens to have a valid session.

I explain this stuff in this article I wrote a while back.

So you can either set withCredentials to false or implement an origin whitelist and respond to CORS requests with a valid origin whenever credentials are involved

please set withCredentials to false , and send token using http header
Authorization: Token GX7ym6gC4gw09LzdlSHBJA
where token is returned from login API
{user_id: xxx, authentication_token: GX7ym6gC4gw09LzdlSHBJA}
take auentication_token and send through http header, and please make sure withCredentials is set to false


#3

We are not using Angular but what you said makes a lot of sense so we are trying it now. It would be nice to be able to use withCredentials to automatically pass cookies but it shouldn’t be a huge deal for us.


#4

@xia_hong, the login endpoint does not include any CORS headers so we can’t even get the authentication token in the first place. Do you know a way to work around this?


#5

the latest code should allow cors for login API


line 23


#6

@xia_hong I’m getting a 404 on the OPTIONS pre-flight request after applying the changes. How should I deal with that?


#7

can you sync with latest code and try it again?