I have installed frappe-js-sdk in my react app which is on localhost:3000 and my backend runs on localhost:8100.
I followed the steps provided in frappe-js-sdk to make API calls
I added allow-cors : “*” in site_config.json file
I’m getting
Access to XMLHttpRequest at ‘http://localhost:8100/api/method/xyz/abc’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Request header field x-frappe-site-name is not allowed by Access-Control-Allow-Headers in preflight response.
Can you please help me out how to address this issue
only success response (status code 2XX) will use cors. If there is error in response and it emits status code other than 2XX, it will show cors error in browser.
Using browser’s network debug console, exact request that is getting cors error. Make a curl call to it to find actual error.
To verify cors is configured correctly try simple requests e.g.
r = await fetch("http://frappe.localhost:8000/api/method/version", {
headers: { "X-Api-Key": "abc-xyz" },
})
m = await r.json()
Some headers won’t work with CORS, you will not be able to use X-Frappe-Site-Name, instead why not just call the site by url and it will figure out the resolution?