TypeError: failed to fetch is vague and unpleasant to look at when a request fails

[shockey]

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
servers: 
- url: http://kyles.hockey:1234/this/wont/work
info:
  title: test
  version: test
paths:
  '/':
    get:
      responses:
        '200':
          description: Successful response

Current behavior

TypeError: failed to fetch appears, giving me no clues as to what went wrong - a refused connection, in this case.

To reproduce...

Steps to reproduce the behavior:

1. Expand the operation in the provided example document
2. Click Execute to fire an ill-fated request

Desired behavior

A styled UI element that appears instead of the regular live response display UI would more clearly indicate that no response was received at all, and displaying the browser's error reason would give me actionable information without having to open my browser console.

Additional context or thoughts

cc #3403.

[reece]

I hit this error during local development (i.e., had nothing to do with AWS that was reported in #3403). The underlying cause (CORS violation) is identical. It would have been helpful for "TypeError: Failed to fetch" to provide more information or at least suggest a CORS violation.

Details: I set up 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'. (Connexion is based on Python flask and provides extended support for openapi integration, including swagger ui.)

[CarlosHAraujo]

I have faced this issue while trying to access a 302 to Azure Blob Storage.
Console error message says:
Access to fetch at 'https://obfuscated' (redirected from 'https://localhost:5001/obfuscated') from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It seems to be an issue with swagger-ui, since I can download the file successfully using POSTMAN.

[mathis-m]

I have faced this issue while trying to access a 302 to Azure Blob Storage.
Console error message says:
Access to fetch at 'https://obfuscated' (redirected from 'https://localhost:5001/obfuscated') from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It seems to be an issue with swagger-ui, since I can download the file successfully using POSTMAN.

@CarlosHAraujo Postman doesn't care about SOP, it's a dev tool not a browser. Since swagger-ui runs in browser it is limited to its security features like CORS policy. Just make sure the server sends correct cors headers. If you can't controll the server you probably need a middleware that will set the CORS headers accordingly.