CORS Issue with React App and Umbraco Heartcore - Configuration in Umbraco Cloud
Hi Umbraco Community,
I'm encountering a CORS issue between my React application and my Umbraco Heartcore project. My React app is running locally during development (e.g., http://localhost:3000), and I'm trying to make API requests to my Heartcore instance. However, I'm receiving CORS errors in my browser console, preventing my React app from fetching data and the same request works from Postman.
I understand that CORS configuration for Heartcore is managed through the Umbraco Cloud portal, not via appsettings.json or any file access. I've logged into my Umbraco Cloud account, navigated to my Heartcore project's settings, and looked for options related to "Domains," "Hostnames," or "Custom Domains."
I've added http://localhost:3000 to the allowed domains/origins in the Cloud portal. I've also tried variations like https://localhost:3000 and localhost:3000 just in case, but the issue persists.
Here are some details about my setup:
Umbraco Heartcore version: (If you know it, include it)
React version: (e.g., React 18)
Method of making API requests: (e.g., fetch)
Steps I've already taken: (As described above)
Could someone please provide guidance on how to correctly configure CORS for my Heartcore project in the Umbraco Cloud portal? Is there anything I might be missing? Any help would be greatly appreciated!
My guess is that the actual root cause is something else, since Heartcore APIs have no configurable CORS policy; they simply allow everything.
Odds are there's a more specific error being returned from the API. These errors typically don't respond with CORS headers, which is why the browser interprets them that way.
You'll probably get more info from the response of the failing request in the network tab of your browser tools.
CORS Issue with React App and Umbraco Heartcore - Configuration in Umbraco Cloud
Hi Umbraco Community,
I'm encountering a CORS issue between my React application and my Umbraco Heartcore project. My React app is running locally during development (e.g., http://localhost:3000), and I'm trying to make API requests to my Heartcore instance. However, I'm receiving CORS errors in my browser console, preventing my React app from fetching data and the same request works from Postman.
I understand that CORS configuration for Heartcore is managed through the Umbraco Cloud portal, not via appsettings.json or any file access. I've logged into my Umbraco Cloud account, navigated to my Heartcore project's settings, and looked for options related to "Domains," "Hostnames," or "Custom Domains."
I've added http://localhost:3000 to the allowed domains/origins in the Cloud portal. I've also tried variations like https://localhost:3000 and localhost:3000 just in case, but the issue persists.
Here are some details about my setup:
Umbraco Heartcore version: (If you know it, include it) React version: (e.g., React 18) Method of making API requests: (e.g., fetch) Steps I've already taken: (As described above) Could someone please provide guidance on how to correctly configure CORS for my Heartcore project in the Umbraco Cloud portal? Is there anything I might be missing? Any help would be greatly appreciated!
Thanks in advance,
Hi Argaw,
I haven't worked with Heartcore, If you got a kudu console from the cloud. Try adding custom headers for cors to allow any in the web.config itself.
My guess is that the actual root cause is something else, since Heartcore APIs have no configurable CORS policy; they simply allow everything.
Odds are there's a more specific error being returned from the API. These errors typically don't respond with CORS headers, which is why the browser interprets them that way.
You'll probably get more info from the response of the failing request in the network tab of your browser tools.
I resolve the issue by removing the depth header parameter.
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" button below.
Continue discussion