This would be a good answer for me except that I cannot get header based auth to work so I am attempting to do it with forms and am also getting CSRF. Any solution? I am trying to create a new topic using the API.

The problem I’ve been having stems mostly from whenever I try to make a call with header based auth, the accepted headers are always “User-Api-Key” and “User-Client-Id” instead of “Api-Key” and “Api-Username” so I get CORS errors. I do not believe I need user based keys. I am just trying to do a simple authenticated request to create a new topic. If I try to use the “User-Api-Key” I am getting a 403 errors. This is sample code (Angular Typescript), but should be similar to other setups: createNewTopic(postBody: any) { let url = "myserver.com/posts.json"; let CATEGORY_ARTICLES = 6; let topicContent = ` Some content Did that work? `; let post = { "title": "Tdk Test 1", "raw": topicContent, "category": CATEGORY_ARTICLES, "target_usernames": "tdekoekkoek", "archetype": "", "created_at": new Date() } let headers = new HttpHeaders() .set("Accept", "application/json") .set("User-Api-Key", DISCOURSE_API_KEY) .set("User-Key", "system") .set("Content-Type", "application/x-www-form-urlencoded") let options = {headers: headers}; return this.http.post(url, post, options); }

[image]Improve BAD CSRF error message when making API calls with content-type application/json the accepted headers are always “User-Api-Key” and “User-Client-Id” instead of “Api-Key” and “Api-Username” user-api-key and user-client-id are a completely different method of authentication. Regular API keys won’t work with those headers. What happens when you use the correct header names? (api-key and api-username)

I get a CORS error because the server is expecting User-Api-Key. I examine the expected headers in the OPTIONS response and that is what it says. There is a similar topic elsewhere on this forum where a user was experiencing this when calling from a javascript app.

Oh, so you are trying to make this request from a client-side javascript application? That is not permitted for numerous reasons. For example, if you include an admin API key in the source code of your javascript app, any user could gain full admin access to your forum. Here is a previous topic on the subject.

Yes that is what I am trying to do. That should be more clearly documented. That has been my whole strategy since getting started with Discourse. I appreciate your help. Been battling with this for days and reading the documentation. Will have to rethink my whole approach as I am currently building a serverless application though I do have access to a node.js server.

This isn’t a restriction specific to Discourse - in general it is a bad idea to include admin credentials in the source code of a website. If you can make the Discourse API call from your node.js server, that would probably be the best solution. If you need your application to be purely client-side, then requesting user-specific api keys is an option, although their setup is a lot more complex: User API keys specification

Frankly accessing APIs from client applications with CORS enabled is extremely common and standard. I can’t believe there is not a more secure way of doing this. An entire industry revolves around hosted APIs that are accessed from different domains. As for accessing with user api, I’ve seen how to create those, but am unclear about what the actual credentials are. I am always getting 403 permission denied when using that method.

I think I’m in a similar position. A bit about the use case: I use Discourse as a backend and I build the frontend in VueJS. I intend to use the rest api alone. For each user in our platform I’ve created a user api key and I use both headers (Api-Key & Api-Username) for authentication. Each user securely authenticates with our servers, and then receives his Discourse Token for authentication. Then we wish to use this token (in a VueJS front) for sending api requests (posting topics, posts, editing, etc). Nothing is hard coded, all tokens are being received after proper authentication. The Problem: I’m getting a CORS error message even though I’ve enabled it in app.yml and set it up in the Security section of the Admin Settings. The error: Request header field api-key is not allowed by Access-Control-Allow-Headers Am I experiencing the CORS error message for the same reason? why are CORS requests blocked when using the “Api-Key” and “Api-Username” headers? I must misunderstand their use case. EDIT: I have a theory about my misunderstanding. When I create a user api key from the “Generate an api_key for a user” endpoint of the REST api, does that key have administrative permissions? Is this key not just a user key for posting and commenting? If so then I understand the restriction. Please correct me if needed.

@david can’t Discourse simply have the server sign a session secret with an HMAC, and this session secret in turn can be used to sign stuff in the given session? If it stolen, then presumably the session cookie or CSRF nonce wouldn’t also be. It is a bit like a certificate chain - you don’t have to put the root key in the browser.

CORS error accessing API from javascript application

Development

david (David Taylor) September 17, 2019, 12:52pm 2

We will need more information to be able to help. Can you share a code snippet showing how you are trying to use the header based authentication?

Topic		Replies	Views
API CORS Headers Incorrect Product Support	10	3222	July 6, 2020
Acess-Control-Allow-Headers CORS Error with API after updating discourse Product Support	9	3497	July 22, 2020
Having issue accessing the Discourse APIs from react app Development rest-api	6	1024	April 10, 2023
Authenticating using API keys when accessing API through fetch Development rest-api	4	1603	November 28, 2019
Getting an error while trying to fetch individual posts General	1	959	April 14, 2022

CORS error accessing API from javascript application

Related topics