Valid response returning "TypeError: Failed to fetch"

[ShaneGMamet]

As requested, please see below a new issue I am having;

I've just grabbed master (3.0.19) and am having this exact same issue, see my Stackoverflow post here: https://stackoverflow.com/questions/45156665/swagger-ui-typeerror-failed-to-fetch-on-valid-response

In a nutshell, I've simply upgraded to 3.0.19 then forced a 403 error, instead of getting a 403 - forbidden, it's returning "TypeError: Failed to fetch".

Previous version: * @Version v2.2.6

Below is my definition snippet

"host": "uk-test-api.services",
"schemes": ["https"],`

/api/v1/cards": {
	"get": {
		"tags": ["Cards"],
		"summary": "Getsalistofcardsforafirm.",
		"operationId": "Card_GetCards",
		"produces": ["application/json"],
		"parameters": [{
			"name": "includes",
			"in": "query",
			"description": "Extracardproperties",
			"required": false,
			"type": "string"
		},
		{
			"name": "lastRowVer",
			"in": "query",
			"description": "lastRowVerofpreviousrequest",
			"required": false,
			"type": "string"
		},
		{
			"name": "Authorization",
			"in": "header",
			"description": "AuthToken",
			"required": true,
			"type": "string"
		}],
		"responses": {
			"200": {
				"description": "200response",
				"schema": {
					"$ref": "#/definitions/CardListJson"
				},
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"400": {
				"description": "BadRequest",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"401": {
				"description": "Unauthorized",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"403": {
				"description": "Forbidden",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"404": {
				"description": "NotFound",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"429": {
				"description": "TooManyRequests",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"500": {
				"description": "InternalServerError",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			},
			"504": {
				"description": "504GatewayTimeout",
				"headers": {
					"Access-Control-Allow-Origin": {
						"type": "string"
					}
				}
			}
		}

Swagger page currently with the issue: https://api-swagger-uk-test.leap.services/#/

The URL is HTTPS: https://uk-test-api.leap.services/api/v1/cards

PS - I've since tested with a 401 response and get the same issue:

And a 400 is working as expected:

@shockey
@webron

[owenconti]

Hi @ShaneGMamet,

I see this error from the Fetch API in the JS console:

Fetch API cannot load https://uk-test-api.leap.services/api/v1/cards. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://api-swagger-uk-test.leap.services' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I see the browser is doing an OPTIONS pre-fetch which returns the correct Access-Control-Allow-Origin header, however the actual GET request that returns the 401 does not return the Access-Control-Allow-Origin header. Are you able to update your backend to return that header for 401 (or all error responses) and try testing this again?

[shockey]

+1, @owenconti.

This detail in CORS caught me up for a bit:

...both the preflight and actual requests must perform a "resource sharing check".

In other words, both preflight and actual responses must contain both the Access-Control-Allow-Origin header

source

I'm not certain this is the problem, since you mentioned that v2 worked for you - but isolating this is a good start.

It's possible that your server is only failing to return CORS headers with 4xx errors - have you tried that with v2?

[ShaneGMamet]

@shockey and @owenconti

Thanks for the feedback, your responses led me to figure out what the issue is, and it's actually an AWS bug with the API Gateway Custom Authorizers.

For anyone with this issue that is using AWS API Gateway's custom authorizers, see this AWS thread - this has been an issue for over a year already:

How to setup response headers for a custom authorizer

In a nutshell - AWS API Gateway custom authorizers do not support returning headers (at all), hence, the issue of it not displaying correctly within the Swagger page.

Until AWS make changes to their Authorizers, we cannot test this - please feel free to close this for now. I'll update this again once the fix has been made.

[shockey]

@ShaneGMamet, glad you figured it out.

Closing!

[milpas999]

I think the issue is with swagger only, I am not sure as I am new to swagger. As I am able to see api response properly in advance rest client.

I am attaching the screenshot

.

[shockey]

@milpas999, this sounds like a different problem. Can you open a new issue?

Please follow the provided template, and include any errors you see in your browser console as well. Thanks!

[virtimus]

You can easilly replicate this by entering link from bittrex api:

https://github.com/jfastnacht/bittrex-openapi-specification

... which directs to:

http://editor.swagger.io/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fjfastnacht%2Fbittrex-openapi-specification%2Fmaster%2Fbittrex-openapi.yaml

And here trying any of "gets" You will receive:

"TypeError: Failed to fetch"

Normal get (ie from browser url) works ok:

https://bittrex.com/api/v1.1/public/getmarkets

[shockey]

Hi @virtimus, thanks for the super easy link to reproducing this!

Looking in my browser console, I see the underlying error is as follows:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://editor.swagger.io' is therefore not allowed access.

This is a CORS error. Basically, Bittrex needs to add headers to their responses that tell web browsers that other websites are allowed to send requests to their API. This is a built-in browser security mechanism, there's no way we can sidestep it in Swagger-UI as long as we run in a browser.

[harrisyang]

@owenconti @ShaneGMamet , can we show the response error message form the server side when authorize error?
This error message - "TypeError: Failed to fetch" is very confusing.

[shockey]

@harrisyang, this has been implemented recently, see #4058 and #4295

[bitclaw]

FYI this error can also happen if the user selects an HTTPS scheme and on their local development environment has a self signed SSL certificate. In this case adding -K to the curl command will fix the error or also just selecting the HTTP scheme should be sufficient.

[10111282]

I have 2 servers configured in the servers section (localhost and Prod), and in my case this error was caused bu using Prod server when I supposed to use localhost.

[flychand]

because of cross origin its happening
I am sure you will solve by your own

visit for node : https://www.npmjs.com/package/cors

[KESNERO]

I think the issue is with swagger only, I am not sure as I am new to swagger. As I am able to see api response properly in advance rest client.

I am attaching the screenshot

.

If you have any solution, please share to us

[shockey]

@KESNERO this issue is resolved, please open a new one if you need help!