Swagger-ui: How to resolve the Cross Domain with swagger-ui?

[LouisZou]

I met a problem when I run the post test for my restful api , the error occurs :
"Origin is not allowed by Access-Control-Allow-Origin"
and the status of the xhr is 0 (normarlly it should be 200)
But If I use the swagger.json from swagger.io , I can completed the post request normally.

Is that meaning there is something lost in my restful API server?

Now I cann't fix the server , only can fix my swagger definitions files or swagger-ui.js.
How need I do to resolve this issue and can completed the normal post request in web page?
Could you give a simple reply for this issue?

Can I add a proxy server in the header of the request? how to set the proxy in swagger-ui or the javascript?

[ponelat]

So this looks like your server isn't setup for CORS (see: https://github.com/swagger-api/swagger-ui#cors-support).

You can use a proxy, by overriding this inside the dist/index.html (see note about dist/index)

   new SwaggerUI({
   url: ...
   ...   
   requestInterceptor: function() {   
        this.url = proxyUrl + '/' + this.url // will change the URL used.
        return this;
      },
   })

Where proxyUrl is some online proxy... such as http://crossorigin.me
Or you can setup your own proxy server and run through that (https://www.npmjs.com/package/cors-anywhere)

PS: if you compile your code, change the real source.. src/main/html/index.html, then compile with npm run build which will generate dist/index.html

You can google for an online proxy...

[webron]

Closing for lack of activity.

[ppKrauss]

It is not a feature, is a bug: curl -X GET "http://myAPI/param" is runing,
but the same at swagger-ui NOT.

Will be usefull a flag in the javascript to enable/disable CORS and avoid a lot of problems:

• interface bug, say only "TypeError: Failed to fetch".

• Javascript bug, say "Fetch API cannot load http://myAPI/param. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'myAPI' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled"

So, a solution, something as a flag-option at initialization,

new SwaggerUI({
   url: ...
  enableCORS: false,
   ...
})

[ppKrauss]

Hi @ponelat, can you help here, it is a project to solve the problem of standalone HTML without Topbar. Visit online example here.

[webron]

There's no way to control CORS from javascript. This is a browser restriction and limitation. There's nothing we can do about it.

[ppKrauss]

@webron yes, "nothing we can do"... Changing a little bit my suggestion,
it is only to express in standard way (initialization) the proxyUrl variable,
to supply it as cofiguration, not changing the code.
...At this example we can't see where to apply a proxyUrl...

[webron]

Sarcasm isn't productive. In any case, since CORS is meant as a security measure, we're not going to do anything about it.

[ppKrauss]

@webron sorry my English (I am not speaker), it is only a copy/paste citation, not intend to be a sarcasm.

I understand that #issuecomment-173179594 was a solution for some cases... in others, as the example at my link above, all (HTML and APIs) are in the same server and domain, there are no problem but the bug occurs. See it running at http://api.ok.org.br/

[cryzzchen]

@ponelat It's no work in swagger 3.x

[viswanathct]

How about using IFrames instead of fetch, if enableCORS is true?

[normana400]

@ricardodejuan @hkosova @ppKrauss @webron @ponelat

how come the same above scenario that breaks with the cors issue here works fine on the redoc demo site?
https://rebilly.github.io/ReDoc/

So the redoc demo site works with my URL (without a cors issue) but the swagger UI demo site doesn't work with the same url (cors issue). What the 2 sites do feature wise is essentially apples to apples.

[hkosova]

@normana400 ReDoc demo site uses a CORS proxy, that is, sends requests through a proxy server. If you unselect the "CORS" checkbox in the header you'll get the same behavior as in the Swagger UI demo - requests will be sent directly from the browser and will be subject to the browser CORS policies.

You can add a CORS proxy to Swagger UI as explained above.
There are public CORS proxy servers like crossorigin.me and CORS Anywhere, or you could run your own.

[printzr]

We solved the CORs issue by implementing an Apache rewrite rule in our service tier.

How this rule works:

• For any request coming from our swagger-ui domain (swagger.example.com)
  -- Set the Access-Control-Allow-Origin * header
  -- Respond to the OPTIONS request with 200

SetEnvIf Referer "^https://swagger.example.com\/.*$" request-swagger
Header set Access-Control-Allow-Origin "*" env=request-swagger

RewriteCond "%{HTTP_HOST}" "^swagger.example.com"
RewriteCond "%{REQUEST_METHOD}" =OPTIONS
RewriteRule "^.*$" - [R=200]

We found this to be an easier solution than implementing a proxy server.

[shockey]

Good stuff @printzr, I'd only suggest setting Access-Control-Allow-Origin: swagger.example.com instead of Access-Control-Allow-Origin: *.

[lamoboos223]

where to change the access control field?