CORS error when trying to access a protected resource
I use a docker container to run swagger-ui. Upon customizing the
SWAGGER_JSON_URL
to my the server running the API (FYI: I am using dependency-track) I am able to retrieve the swagger.json and after authorizing with an x-api-key, if I try to access an API that does not require authentication the CORS headers (access-control-allowed=*) are setup correctly and everything works.
When I try an API that requires authentication, then the browser will do a prefetch OPTIONS with has all of the correct headers. However, the browser will block with API call with the following error:
from origin 'localhost' has been blocked by CORS policy: Cannot parse the Access-Control-Allow-Methods response header field in preflight response.
The allow methods header in the preflight are valid.
I tried to start the container with the WITH_CREDENTIALS environment variable and I get the same error. I get the same error when I try to run swagger-ui using the standalone method modifying the dist/swagger-initializer.js to point to the correct url. I think that something needs to be configured in swagger-ui so that the call to the protected API goes through. I cannot blame the API server because it does not even receive the API call (just the prefetch) as the browser blocks it.
This happens with Version 109.0.5414.75 (Official Build) (64-bit) of chrome and version Version 108.0.1462.54 (Official build) (64-bit) of Microsoft Edge. Those two are very recent version of their respective browsers.
I found out the problem. The Access-Control-Allow-Methods returned from the API server prefetch request used spaces instead of comma to separate the methods...Argggg. After correcting everything is working fine.
