Request from react app to rancher API returning 401

Rancher
1

Hi there,

I need to request the rancher api from a react app.

What I found out is, that rancher needs authentication (I use bearer token) for the OPTIONS preflight. This preflight is sent from Chrome and Firefox before sending the real request. If the authentication details in the preflight are not sent, rancher surprisingly returns 401. This happens when running the app in Chrome and Firefox as well as performing a request via curl (curl -v -X OPTIONS https://api.example.io/v3).

The problem is that by default authentication details aren’t sent from browsers during preflight, so this is a real barrier to get ahead.

From my understanding and by reading docs etc. the preflight request should not contain any authentication details.

So, did I oversee something?

Any help and hints appreciated, thank you.
Boris

2

It doesn’t really matter because there won’t be any CORS support returned anyway. The WebSocket client in browser’s does not support setting arbitrary headers so you need the token to be in the cookie anyway.

Proxy the connection from your host to the API, there’s a nodejs example in the UI.

3

Thank you, that makes sense.

I’d like to use Kong as a proxy.
It seems that rancher accepts credentials only with bearer token - is that correct? Like so:

Authorization: Bearer user:psw

Basic Authorization is not supported?

Authorization: Basic user:psw

or likewise base64 encoded:

Authorization: Basic base64string

I tried with Basic Auth, authorization in rancher seems not to work with this specific header-format (returns 401).

It seems that kong’s plugin basic-auth only supports the latter ones. If there’s no other way I need to fiddle with kong.

Thx!

4

For future references…

Even with an api-proxy (like kong) you’ll need a proxy running on serverside and on the same domain, handing over the requests from the client to rancher (or kong, whatever,…) - if not, you’ll run into cors issues.

thanks @vincent for the wise words.