CORS issue in oauth2 authorizationCode flow

Q&A (please complete the following information)

• OS: [e.g. macOS] macOS
• Browser: [e.g. chrome, safari] Safari
• Version: [e.g. 22] 13.1
• Method of installation: [e.g. npm, dist assets] npm
• Swagger-UI version: [e.g. 3.10.0] 3.24.3
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] OpenAPI 3.0.2

Content & configuration

Example Swagger/OpenAPI definition:

  securitySchemes:
    oauth:
      type: oauth2
      flows: 
        authorizationCode:
          authorizationUrl: https://XX/authorization 
          tokenUrl: https://XX/token
          scopes: 
            registrar: can register

Swagger-UI configuration options:

ui.initOAuth({
    clientId: "XXX",
    clientSecret: "XXX",
    appName: "apitemplate",
    scopeSeparator: " ",
    useBasicAuthenticationWithAccessCodeGrant: 'true',
  })

Describe the bug you’re encountering

I used the authorization_code grant flow to receive my grant code, however, during token retrieval i received error: Auth ErrorTypeError: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

Screenshots

[pfeigl]

We are facing the same problem with an IdentityServer which does not support CORS for /conntect/token requests.

Most swagger implementations (we are using NSwag and Swashbuckle) do however support injecting custom javascript code into the swagger startup page.

With this we were able to workaround the issue by using this code

	window.fetch = function (fetch) {
        return function () {
            var req = arguments[1];
            if(req.headers["X-Requested-With"]) {
                delete req.headers["X-Requested-With"];
            }
            return fetch.apply(window, arguments);
        };
    }(window.fetch);

Hth someone else.

[SpoonMeiser]

The original problem that the X-Requested-With header was added for (the browser does the wrong thing if you enter incorrect details) seems less of a problem than not being able to authenticate at all.

I’d argue that the header should be removed, or at least made configurable so that people who have issues with CORS can disable it.