Load a local file into a locally-hosted swagger-ui?

[Joe Knapka]

Hello all,

I have cloned the swagger-ui Git repo and started a server using npm run dev. It is running on local port 3200.

In older versions of swagger-ui, I could type a file:// URL into the "Explore" field and load a .yaml file from my local filesystem, to explore the UI of my under-development service running on the same machine. However, this version of swagger-ui complains that:

Fetch error

Failed to fetch file://C/TcDev/products/ucm/src/swagger/ucm-dataserver.yaml

Fetch error

Possible cross-origin (CORS) issue? The URL origin (file://) does not match the page (http://localhost:3200). Check the server returns the correct 'Access-Control-Allow-*' headers.

Any idea how I might get around this problem? I'm not sure which "server" would have to return the CORS headers, since it's just a file://.

Thank you,

Joe Knapka

[Kyle Shockey]

Hi Joe!

I'm not aware of any versions of Swagger-UI that support this, but if you can point me to an example setup that works, I can look into it further.

You're actually bumping up against a browser security limitation: JavaScript applications are not allowed to access `file://` URLs at all in modern browsers, because otherwise any script would have unfettered access to the local files on your machine. (Allowing such a thing would become a security problem pretty quickly - what if a page grabbed the contents of `file://~/.ssh/id_rsa` for every visitor?)

I imagine you're running the service that you're developing while you work with the UI - I'd suggest having your service serve the `swagger.yaml` directly. Many services follow the convention of service the Swagger definition at the root of the API's path (e.g. `http://myapi.com/v1/swagger.yaml`).