Swagger UI - “ TypeError: Failed to fetch” on valid response

Question

I\'ve just pulled down the latest Swagger from the Git repo (3.0.19) using: https://github.com/swagger-api/swagger-ui.git and updated my API to use the new version.

Answer 1

Please check the swaggerOptions provided to swagger jsdoc and check whether host and base name is correct. I have encountered the same issue before and got fixed the issue by correcting this. Hope this will also solve the problem.

Eg:

const options = {
  swagger: "2.0",
  swaggerDefinition: {
    // options.swaggerDefinition could be also options.definition
    info: {
      title: "Customer API", // Title (required)
      description: "Dummy Customer API for implementing swagger",
      contact: {
        name: "Stack Overflow"
      },
      version: "1.0.0" // Version (required)
    },
    host: "localhost:5000",
    basePath: "/"
  },
  // Path to the API docs
  apis: ["SwaggerImplementation/index.js"] // For complex api's pass something like apis: ["./routes/*.js"]
};

Answer 2

It's because some times your IIS Binding's HTTPS SSL Certificate will automatically goes to Not Selected. So again you have to manually select the SSL Certificates to1 IIS Express Development Certificate1. Below I have mention how to do:

1. Open IIS Click Default web sites.
2. In the right side corner you will see a some setting click "Bindings", you will get a Site Binding window.
3. Then you will get http and https details.
4. In that Click "https" and click edit, then you will get another window Edit Site Bindings.
5. In that window check SSL Certificates.
6. If SSL Certificate = Not Selected select IIS Express Development Certificate.
7. Then stop and Start the IIS.

Issue will be solved.

Answer 3

Because the problem of cross-origin means your website is hosted on either locally or with port 8000 or different port, and your swagger's port number is different, so this problem is genuine. We can fix it by giving permission.

Here is the node code:

app.use( (request, response, next) => {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

We can solve by using CORS npm as well. https://www.npmjs.com/package/cors