[QUESTION] How to ensure that the Authorize button points to HTTPS instead of HTTP?

First check

• I used the GitHub search to find a similar issue and didn’t find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google “How to X in FastAPI” and didn’t find any information.

Description

I’ve run into a situation where the Authorize button in the generated Swagger docs isn’t pointing to the HTTPS URL when sending the authorization requests, so browsers are throwing a fit due to mixed HTTP/HTTPS content.

The interesting (and confusing) part is if I go to the endpoint itself (ie /api/auth) and send the request there, it properly sends the request over HTTPS and provides a valid response.

How can I ensure that the Authorize button makes use of HTTPS?

Additional context

This works just fine when I serve all the content over HTTP (ie when I run/test locally). Please note that I am not having FastAPI itself serve over HTTPS, the HTTPS is being provided by a load balancer.

Console Error message

Here is the direct message I’m getting in the console:

Mixed Content: The page at 'https://myapi.local/api/docs#/Authentication/auth_api_auth__post' was loaded over HTTPS, but requested an insecure resource 'http://myapi.local/api/auth/'. This request has been blocked; the content must be served over HTTPS.

Swagger Error

Swagger itself reports the following error:

Auth errorTypeError: Failed to fetch

[CWKevo]

It seems that as long as /token endpoint is in the main FastAPI object the swagger login works…

Can confirm that this seems to be the issue in my case too. If I split the authentication and token routes into a separate API router, the location header (while logging in at token route) has the http:// scheme, which results in browser denying the request because of “mixed content”. If I move all authentication related routes under the main FastAPI app, authentication works as expected.

So I did some more testing, and it seems that the location header is here just to redirect the request to the same route, but with trailing slash.

So (oddly), adding a slash at the end of tokenUrl fixes the issue. Example:

OAUTH2_SCHEME = OAuth2PasswordBearer(tokenUrl="token/")

Edit:

When you use APIRouter with prefix such as /authentication, and then just create a route with prefix / for token obtaining/login, then the full route is /authentication/, which is why the issue above is a thing (because then, tokenUrl is indeed /authentication/. Natually, FastAPI attempts to fix this by redirecting the request without slash at end to the correct route with the correct trailing slash (I assume), but it seems that something goes wrong when it comes to the https:// scheme. That’s all that I know

[tiangolo]

Thanks for the help here @chris-allnutt ! 👏 🙇

@Shackelford-Arden maybe this section can help you: https://fastapi.tiangolo.com/advanced/extending-openapi/#self-hosting-javascript-and-css-for-docs