Acess-Control-Allow-Headers CORS Error with API after updating discourse

Product Support

AI-generated summary

A user, pablogg, is experiencing a CORS error after updating Discourse. The error occurs when making API calls from a Vue application using authentication headers (Api-Key and Api-Username).

@RGJ and @blake point out that using API credentials in client-side code is a security risk and should be avoided. Instead, they recommend leveraging an existing session for API requests.

@blake explains that the Api-Username header is not allowed in CORS requests but suggests using the User-API headers, which are allowed.

@pablogg seeks a solution to consume the API without using the authorization UI for every user, specifically wanting to use the api-username header. However, ultimately decides to revert to a previous version of Discourse to avoid rewriting the API integration.

1

I upgrade discourse yesterday and I get all the API callbacks with error I have found that the problem is the autentications headers (1) but I trying with some calls and I get this error:

Access to XMLHttpRequest at 'https://mydomain.com/notifications.json?username=admin' from origin 'https://mydomain.com' has been blocked by CORS policy: Request header field api-username is not allowed by Access-Control-Allow-Headers in preflight response.

I using Vue and I have added the api-key and api-username to the heades like this:

Vue.http
        .get(
             "https://discourse.mydomain.com/notifications.json?username="+input.username,
          {
            headers: {
             "Api-Key":"xxxxxxxxxxxxxxxxx",
             "Api-Username": "system",
              "content-type": "application/json",
              accept: "application/json"
            }
          }
        )

(1) Discourse REST API Documentation

2

You may need to have CORS setup in your site settings?

3

Yes, I have added the domain where I call the API in discourse settings, but that error about field api-username, I dont know when I have to resolve.

4

You are putting your system API key in client side code? :scream:
This means that anyone can grab it from your Javascript code and use it to completely own your forum.

Any Ajax HTTP requests to Discourse should be leveraging an existing session, or not be needing a session at all.

5

Not just a testing , I am using the username

      Vue.http
    .get(
      "https://discourse.mydomain.com/notifications.json?username="+input.username,
      {
        headers: {
       "Api-Key":"xxxxxxxxxxxxxxxxxxxxxx",
        "Api-Username": input.username    
        }
      }
    )

But I getting the same error with de Cors and the field api-username

6

Let me repeat what I said:

That means: no authentication headers. At all.

7

You really should not be using these API credentials for CORS requests which is why that header field is not allowed.

However we do allow the user-api headers in CORS:

8

I have read the User API keys specification …

In my case I have SSO with a frontend app in javascript, Could I consuming the API without using the authorization UI for every user? I would like a way that a could use de api-username … is that possible?

Regards

9

could you solve this?
Thank you!

10

In the end, I went back to the previous version of Discourse so I didn’t have to change all the API integration