In this article, we described how to run the Swagger UI tool on Docker Desktop and how to fix the CORS issue.
Swagger UI tool
The Swagger UI is an open source project to visually interact with the OpenAPI (Swagger) document. The Swagger UI allows you to visualize and interact with the API’s resources.
You can examine the tool by entering https://petstore.swagger.io/ in a browser.
At first glance, it is only for the Petstore document, but you can use it to connect to your OpenApi documents (for example, on a GitHub repository). Copy the link to a GitHub raw file (with the extension *.yaml or *.json), paste it in the Swagger UI address field, and click on the button Explore, and you will be able to examine and test your OpenApi Document.
Run the Swagger Tool in Docker Desktop
We will demonstrate how to install Swagger UI on the Docker Desktop in this section.
Go to the core folder of the project.
Run a CLI tool (shell, cmd or Powershell) from the project’s core folder and execute the command:
docker pull swaggerapi/swagger-uiThe command docker pull downloads image from Docker Hub to your local Docker Desktop.
Run the container by command:
docker run -p 8087:8080 swaggerapi/swagger-uiEnter localhost:8087 in the browser’s address field. You will get the swagger UI tool in the browser with the demonstration project Swagger Petstore:
Enter the address of an OpenApi specification file from the GitHub repo (row file link) in the address field of the Swagger UI and click on the button Explore. For example:
https://raw.githubusercontent.com/your_company/swagger-files/master/v2/billing-api-swagger.yaml?token=AAOYRMPVUCHHJII4EYL555LBBB65QNow you can explore your OpenApi files remotely.
How to Fix the CORS Issue
As the installed Swagger UI tool works on the local host, you may face a CORS problem.
Cross-Origin Resource Sharing (CORS) mechanism enables a server to specify alternate origins from which a browser should be permitted to load resources. For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts.
You can resolve the CORS problem by installing the appropriate browser extension. For instance, CORS Everywhere is a suitable extension for the browser Firefox. You can see its icon in the top-right corner. By default, this setting is inactive. Activate it to fix the CORS issue.
Was this helpful?
1 / 0