How to avoid CORS errors ("Failed to fetch" or "Server not found or an error occurred") when making requests from Swagger Editor?

Question

I have the following OpenAPI definition:

swagger: "2.0"

info:
  version: 1.0.0
  title: Simple API
  description: A simple API to learn how to write OpenAPI Specification

schemes:
  - https
host: now.httpbin.org
paths:
  /:
    get:
      summary: Get date in rfc2822 format
      responses:
        200:
          schema:
            type: object
            items:
              properties:
                now:
                  type: object
                    rfc2822:
                      type: string

I would like to retrieve rfc2822 from the response:

{"now": {"epoch": 1531932335.0632613, "slang_date": "today", "slang_time": "now", "iso8601": "2018-07-18T16:45:35.063261Z", "rfc2822": "Wed, 18 Jul 2018 16:45:35 GMT", "rfc3339": "2018-07-18T16:45:35.06Z"}, "urls": ["/", "/docs", "/when/:human-timestamp", "/parse/:machine-timestamp"]}

But when I make a request from Swagger Editor, I get an error:

ERROR Server not found or an error occurred

What am I doing wrong?

@Helen, `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.` Can I fix it somehow or play with swagger & `now.httpbin.org` from another place? — Rudziankoŭ, Jul 18 '18 at 17:12

Helen · Accepted Answer · 2019-01-28T21:31:26.170

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

This is a CORS issue. The server at https://now.httpbin.org does not support CORS, so the browsers won't let web pages served from other domains to make requests to now.httpbin.org from JavaScript.

You have a few options:

Ask the owners of https://now.httpbin.org to support CORS.

Note: The server must not require authentication for preflight OPTIONS requests. OPTIONS requests should return 200 with the proper CORS headers.
If you are the owner - consider hosting Swagger UI on the same server and port (now.httpbin.org:443) to avoid CORS altogether.
Disable CORS restrictions in your browser. This reduces browser security so only do this if you understand the risks.
- Bypass CORS in Chrome
- Bypass CORS in Firefox
Use SwaggerHub instead of Swagger Editor to edit and test your API definitions. SwaggerHub proxies "try it out" requests through its servers so it's not subject to CORS restrictions. (Disclosure: I work for the company that makes SwaggerHub.)

By the way, your response definition is not valid. The response is missing a description and the schema is wrong (e.g. has an extra items keyword). It should be:

      responses:
        200:
          description: OK
          schema:
            type: object
            properties:
              now:
                type: object
                properties:
                  rfc2822:
                    type: string

How to avoid CORS errors ("Failed to fetch" or "Server not found or an error occurred") when making requests from Swagger Editor?

1 Answers1

Linked