Error 403 when posting through htmx.ajax javascript API

[ohmyohmyohmy]

Hi,

I've been trying to get htmx.ajax() to send a POST request from a custom javascript, but I keep getting an Error 403. No issues with GET. What do I need to include with the function to get this to work using the POST verb? Thanks!

[jacobobryant]

For regular htmx requests, the starter app sets the x-csrf-token header; I'm guessing that's the problem:

biff/starter/src/com/example/ui.clj

Line 53 in 502a4f5

{:hx-headers (cheshire/generate-string

To do a request from JS, you'll probably first want to embed the value of csrf/*anti-forgery-token* somewhere where the JS can get it, e.g. [:div#csrf {:data-csrf-token csrf/*anti-forgery-token*}]. Then in JS you can do something like token = document.getElementById('csrf').getAttribute('data-csrf-token'). Then you can use that to set the x-csrf-token header in your ajax request.

[ohmyohmyohmy]

I've managed to get the x-csrf-token in json format within JS. But I don't know how to relay that information back to the server.

I use console.log() to confirm that the x-csrf-token is indeed in JSON format. But it still doesn't work:

var csrf = document.getElementById("main-body").getAttribute("hx-headers"); console.log(csrf); htmx.ajax('POST', '/testingpost', {target: '#testingposting', swap: 'innerHTML', headers: csrf} );

Where did I go wrong?

[ohmyohmyohmy]

Gah! I found it. FINALLY! I'm supposed to parse the JSON first.
var csrf = document.getElementById("main-body").getAttribute("hx-headers"); console.log(csrf); htmx.ajax('POST', '/testingpost', {target: '#testingposting', swap: 'innerHTML', headers: JSON.parse(csrf)} );

Thanks for your help :)