Swagger-ui and micro-services

[TofPlay]

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?

[Pakisan]

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

@TofPlay Good morning. You need to allow CORS for api.mycompany.com. Without it you can't make requests from one subdomain to another.

[shockey]

Hey @TofPlay, first know that deploying Swagger UI and your API as separate services through Docker is a really popular thing to do! Let's try to figure out what's going on...

Questions:

• What is the RUN block in your Dockerfile achieving? Just serving Swagger UI through Express with CORS?
• If you open your browser's development console, do you see any errors related to the swagger.json request? Check the Network tab as well.

[TofPlay]

The problem with allowing CORS on the API is that it will not only be for Swagger UI. At the security level it's not the best.

[shockey]

@TofPlay you can manipulate Access-Control-Allow-Origin to only allow your Swagger UI deployment to talk to your API, instead of sending back *.