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.

Ran git describe --tags to confirm and my version is currently: v3.0.19-6-gaab1403

The problem I'm having is one described here, whereby my response is a 403 (I can see this in the inspector on the browser) and although I have a reponse for error 403, I still get the TypeError: Failed to fetch message.

Here's a snippet from my definition regarding the 403 response:

                    "403": {
                    "description": "Forbidden",
                    "headers": {
                        "Access-Control-Allow-Origin": {
                            "type": "string"
                        }
                    }
                },

I've also noticed it reported here however, I know it's not a CORS issue as I have tested the endpoints and the OPTIONS are returning correct, as are the endpoints if called with valid information (I force this 403).

Could anyone point me in the right direction please?

Update: I have since tested on a 401 response, with the same response.

And that a 400 is working as expected:

If in development, make sure the Solution/Server is actually running and you are not trying to use a cached web page. — jlo-gmail, Jul 22 '20 at 18:56

Hexie · Accepted Answer · 2017-07-25T07:06:56.640

For anyone that runs into this problem;

After a day of troubleshooting and the Swagger support guys pointing me in the right direction, it turns out that this is currently caused by a bug within the AWS API Gateway custom authorizers.

We are currently using AWS API Gateway for managing our APIs, this includes managing all our authorization via a custom authorizer. The issue is that custom authorizers do not currently support passing through headers within the response and Swagger UI needs the Access-Control-Allow-Origin:* within the response header(s) to display the correct HTTP status code.

See this AWS thread regarding the issue (which is older than a year already):

https://forums.aws.amazon.com/thread.jspa?messageID=728839

Swagger UI discussion on same: https://github.com/swagger-api/swagger-ui/issues/3403

EDIT / UPDATE

This has since been resolved with the use of Gateway Responses. See this same forum (page 2):

https://forums.aws.amazon.com/thread.jspa?messageID=728839

I added the ```Access-Control-Allow-Origin:*``` and still facing the error — Abhishek Kumar, Sep 17 '19 at 17:19
In case it helps anyone else... this is the link I was actually looking for in that last thread (Gateway Responses). [https://aws.amazon.com/about-aws/whats-new/2017/06/amazon-api-gateway-enables-customization-of-error-responses/](https://aws.amazon.com/about-aws/whats-new/2017/06/amazon-api-gateway-enables-customization-of-error-responses/) — Travis, Aug 11 '20 at 20:44

Reece · Answer 2 · 2018-11-26T16:19:51.157

I hit this error during local development (i.e., had nothing to do with AWS). The underlying cause (CORS violation) is identical. The following might help others who encounter this problem.

I setup connexion with an openapi spec that referred to http://localhost:9090/. When the development server starts, it says "Running on http://0.0.0.0:9090/". That page appears to work, but the swagger ui uses http://localhost:9090/ from the openapi spec for subsequent requests and shows TypeError: Failed to fetch in results. The browser console shows Access to fetch at 'http://localhost:9090/vr/variation' from origin 'http://0.0.0.0:9090'. The provided curl command worked fine; although initially confusing, the curl success is a clue that the problem is due to browser blocking rather than server-side failure.

(Connexion is based on Python flask and provides extended support for openapi integration.)

another easy way to get around this is to use [the built in feature in Safari to disable cors checks for the current browser session](https://stackoverflow.com/q/4556429/26510) — Brad Parks, Jul 23 '20 at 16:26

score 12 · Answer 3 · answered Dec 17 '20 at 20:47

12

I had the same issue and there was a very simple fix. I accessed my site using HTTP but it required HTTPS. My site was redirecting to HTTPS when calling an endpoint.

This violated the "same-origin policy": https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

answered Dec 17 '20 at 20:47

Garry English

5,070
1
36
23

I also, solve this way. Just changed Schemes HTTPS to HTTP because my APIs were on HTTP. – Mahi Feb 16 '21 at 10:54
2

I ran into the same issue in my .NET Core app. The problem was this line in my `Startup.cs` file in the `Configure` method: `app.UseHttpsRedirection();`. This was causing the flip from HTTP to HTTPS and thus resulting in a CORS error. – Brian Maupin Jul 22 '21 at 21:23
Same here in .NET Core Web API template. The giveaway was the 307 redirect in the network trace in dev tools just prior to the CORS error – Michael Smale Mar 11 '22 at 06:10

score 7 · Answer 4 · answered Mar 26 '19 at 08:21

Disclaimer:- This answer is for APIs developed using Asp.net Core

I have faced similar issue when trying to access the APIs from the Swagger UI Editor. I was trying to access some APIs developed using Asp.net Core where as the Swagger UI Editor was hosted on Apache. I was facing CORS (Cross Orgin Request).

I have to modify my APIs code to allow CORS request using following code:- Declare within Startup.cs File having class "StartupShutdownHandler"

private readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

Added a section of code within ConfigureServices Method.

var str = ConfigurationHandler.GetSection<string>(StringConstants.AppSettingsKeys.CORSWhitelistedURL);
        if (!string.IsNullOrEmpty(str))
        {
            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins(str);
            });
            });
        }

Added a line of code within Configure Method.

 app.UseCors(MyAllowSpecificOrigins);

Reference Enable Cross-Origin Requests (CORS) in ASP.NET Core

score 5 · Answer 5 · edited Aug 21 '18 at 07:04

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

score 5 · Answer 6 · answered Dec 23 '19 at 15:46

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"]
};

Riskhan Rizvi · Answer 7 · 2021-06-27T03:31:10.963

It's because some times your IIS Binding's HTTPS SSL Certificate will automatically goes to Not Selected. So again you haveThere was a similar question raised and there are few good answers Please refer this link to manually selectget the SSL Certificates to1 IIS Express Development Certificate1. Below I have mention how to doanswer:

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

Kemal Atik · Answer 8 · 2020-05-20T13:55:49.033

I have encountered the same error while trying to authenticate access OAuth2 secured Rest API set. API server deployed on VM and was connecting to it using IPSEC VPN. Actually username/password in HTTP header with basic authentication was sent using separate API other than /oauth/token, backend itself was calling http://localhost:8080/api/v0/oauth/token with client secret and returning back token to client. After changing localhost to server's actual local IP , problem disappeared.

score 0 · Answer 9 · answered Aug 28 '20 at 05:02

0

This error is generic on swagger side and could be due to many possible reasons. In my case, it was due to connection error. My swagger page was not responsive due to connection issue at my side. I had to refresh it once and worked for me.

answered Aug 28 '20 at 05:02

saurabh umathe

315
2
17

score 0 · Answer 10 · answered May 26 '21 at 10:55

0

If it's a .NET Core API, try commenting out the below method call in the StartUp.cs Like below,

// app.UseHttpsRedirection();

answered May 26 '21 at 10:55

Pubudu Senarathne

49
3

score 0 · Answer 11 · answered Feb 13 '22 at 14:55

Below article might help. I was facing same issue when from Swagger ui calling API Gateway which further calls Lambda function using proxy integration (which passes response headers from lambda). In my case I missed to set response headers Access-Control-Allow-Origin in Spring boot app lambda handler response-event object APIGatewayProxyResponseEvent. After setting this header in handler class, Swagger UI was able to call api gateway. See https://fanchenbao.medium.com/thanks-for-the-article-it-is-a-great-way-to-get-started-with-deploying-swagger-ui-on-s3-7990c7b48851

score 0 · Answer 12 · answered Jan 30 '23 at 15:06

0

you can use modheader extension in order to fix it

answered Jan 30 '23 at 15:06

Mauricio Carrero

95
3

score 0 · Answer 13 · answered Feb 08 '23 at 16:57

0

For .NET Core 2.1 or above In Startup or Program, register configuration to IApplicationBuilder to app.UseCors("AllowAll");

answered Feb 08 '23 at 16:57

Jey Jegathesan

61
3

score -1 · Answer 14 · answered Dec 04 '20 at 05:34

Every solution will definitely be correct :) But in my case I have that line in my webconfig file

 <environmentVariable name="ASPNETCORE_HTTPS_PORT" value="5001" />

I just replace ASPNETCORE_HTTPS_PORT to ASPNETCORE_HTTP_PORT and the error has been gone :). So the final line is

  <environmentVariable name="ASPNETCORE_HTTP_PORT" value="5001" />

replace 5001 with your port.

Swagger UI - " TypeError: Failed to fetch" on valid response

14 Answers14

Linked