Description
When running on localhost I have a problem accessing API docs for my app - both "/docs" and "/redoc" endpoint are not showing anything in browser, thought request status is 200.
Browser developer tools show
"Loading failed for the
Looks like its security related issue - when I access CDN resource directly, browser states:
cdn.jsdelivr.net has a security policy called HTTP Strict Transport Security (HSTS), which means that Firefox can only connect to it securely. You can’t add an exception to visit this site.
The issue is most likely with the website, and there is nothing you can do to resolve it.
Is there a way to get over it, except for serving Swagger files direcly from my app?
I think you need to add localhost to CORS, like in the postgres-fullstack generator. Have a look at:
BACKEND_CORS_ORIGINS={{cookiecutter.backend_cors_origins}} and backend_cors_origins description (for localhost) in the main docs
hmm, would it actually help? I don't have any problems serving static from local (why would I), I think localhost is whitelisted by default.
The problem is with Swagger js file served from external CDN
Apologies, I didn't fully read your info regarding external CDN. Nevertheless, is there a reason why it would be problematic adding the external CDN to the CORS origins?
just wondering if there's anything more to it - if not I think those CDNs should be added to CORS inside Fastapi itself as it internally refers to those.
Will give it another try, initially adding CORS didn't work for me.
I am not an expert at this at all. But this
"Loading failed for the <script> with source “https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js” "
appears to say that swagger-ui-bundle.js failed to load on the client side - which is what CORS would affect. Fastapi, on the other hand, is backend and therefore is only affected by the server-side changes (e.g. pulling swagger-ui-bundle.js and hard-coding it in the API response or serving as a static file should work without modifying CORS).
agree on that. However currently /docs endpoint frontend shipped with Fastapi relies on external CDN to deliver swagger-ui-bundle.js , which might cause CORS issue.
Will have a look, however recently I'm really short on time to play with it
This is strange, I think it could be related to your current environment.
I just checked with Firefox just to be sure:

Try a different browser to see if it's a browser configuration.
If it persists, try a different operating system (maybe the laptop of a friend) to see if it's a configuration in your OS.
If the error still shows up, then it might be something related to your specific code. In that case, you can make the minimum self-contained example that shows the problem and create an issue here, that way we might be able to help you debug it.
Assuming the original issue was solved, it will be automatically closed now. But feel free to add more comments or create new issues.
@tiangolo Having just had an issue internally where the CDN asset was being blocked (now resolved), I did wonder if it was an option to provide the ability to save the asset locally instead of depending on the CDN always being available. While not currently an issue, I could see some of the environments I work in inhibit the ability to use CDNs.
@Shackelford-Arden Please see https://fastapi.tiangolo.com/advanced/extending-openapi/#self-hosting-javascript-and-css-for-docs
Oooh lookie there. My bad! Managed to completely miss that. Thank you @phy25 !