Frappe UI: 400 BAD REQUEST (List Resource)

I am following Hussain Nagaria’s VueJS, TailwindCSS, and FrappeUI videos playlist. In the third video, frappe.client.get_list, I have set up all the steps and procedures to call the API request for Frappe UI List Resource. The request has been set up correctly, calling the (Request Method: POST) (Request URL: http://todo.localhost:8080/api/method/frappe.client.get_list) in the Network tab, but it gives me Status 400 BAD REQUEST! So, what’s wrong?
Screenshot from 2025-01-07 13-37-12
Screenshot from 2025-01-07 13-37-20

Hey @AssemBahnasy

I’m not familiar with Frappe UI/Vue, but I think you can check the following:

  1. On your local setup, ensure that “allow_cors” is set to “*” in common_site_config.json - this is in the “sites” folder in your bench.
  2. Also check if “ignore_csrf” is set to 1 in common_site_config.json

Remember that these are only for your local dev setup, not for production. On production, the Vue app will be served by Frappe on the same domain so this won’t be an issue. For local development setups, the app is served on port 8080 via Vite hence the error.

Forgot to add: the Vite config usually requires a proxy setup as well. Can you check if you have set that up - Hussain’s course should have mentioned it.

Indeed, I should have set up my site to ignore the CSRf! I figured it out after posting my topic. Thanks a lot for your reply!

1 Like