Swagger-ui and micro-services

Q&A (please complete the following information)

• OS: Linux
• Browser: Chrome
• Version: 72.0.3626.81
• Method of installation: npm
• Swagger-UI version: 3.20.6
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

My dockerfile:

FROM node

RUN npm update npm &&\
    npm install http-server replace

RUN mkdir -p /tmp/swagger
ADD https://github.com/swagger-api/swagger-ui/archive/v3.20.6.tar.gz /tmp/swagger/swaggerui.tar.gz
RUN tar --strip-components 1 -C /tmp/swagger -xzf /tmp/swagger/swaggerui.tar.gz 

RUN mkdir -p /swaggerui/dist/swagger-ui &&\
    mv /tmp/swagger/dist/* /swaggerui/dist/swagger-ui &&\
    rm -rf /tmp/swagger

ENV API_URL http://petstore.swagger.io/v2/swagger.json 

RUN echo "'use strict';\
var path = require('path');\
var createServer = require('http-server').createServer;\
var dist = path.join('swaggerui', 'dist');\
var replace = require('replace');\
replace({regex: 'http.*swagger.json', replacement : process.env.API_URL, paths: ['/swaggerui/dist/swagger-ui/index.html'], recursive:false, silent:true,});\
var swaggerUI = createServer({ root: dist, cors: true });\
swaggerUI.listen(8888);" > /swaggerui/index.js

EXPOSE 8888
CMD ["node", "/swaggerui/index.js"]

How can we help?

I'm trying to install Swagger-ui in a micro-services architecture
Concretely it means that Swagger-ui is working in a container docker different from other services. The services are accessible via an url of the domain api.mycompany.com and Swagger-ui via swaggerui.mycompagny.com.

The problem is that it generates me the error:

Errors
Hide
 
Fetch errorFailed to fetch http://api.mycompany.com/swagger.json
Fetch errorPossible cross-origin (CORS) issue? The URL origin (http://api.mycompany.com) does not match the page (http://swaggerui.mycompagny.com). Check the server returns the correct 'Access-Control-Allow-*' headers.

Here is what the API service returns when we make a request on the json:

$ curl -I http://api.mycompany.com/swagger.json
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,HEAD,OPTIONS
Access-Control-Request-Headers: Content-Type, api_key, Authorization
content-type: application/json; charset=utf-8
content-length: 5791
date: Sun, 05 Feb 2019 07:24:03 GMT
Connection: keep-alive

What should I do for swagger-ui to work in a micro-services architecture knowing that each service can have its own sub-domain?

Start with the Dockerfile and the generated /swaggerui/index.js, then inspect how the configured API_URL is used by the Swagger UI at /swaggerui/dist/swagger-ui/index.html. Reproduce the request to http://api.mycompany.com/swagger.json from the separately hosted UI and verify the cross-origin response; done means Swagger UI can load the service specification across the stated subdomains.