Hello Forum Community,
I hope this message finds you well. I am currently facing some challenges with my web application, “forum-system,” after recently migrating the backend from Heroku to Render. I have two separate repos. Client creted by react-app and server created by node express api. The issues primarily revolve around CORS (Cross-Origin Resource Sharing) and API communication.
- CORS Issue: Upon deployment backend (server repo) on Render, I encountered a CORS issue when trying to make API requests from my React app hosted at my local host to the backend deployed on ‘[https://forumsystem-server.onrender.com]’. The error message in the console reads:
Access to fetch at 'https://forumsystem-server.onrender.com/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy...
- API Communication Failure: After updating my React app to use the Render API URL, I attempted to sign up a user, but the signup process failed. The error messages provided little information, making it challenging to identify the root cause.
- Deployed backend to Render: Successful deployment of the backend on Render at ‘[https://forumsystem-server.onrender.com]’.
- Updated React app: Updated the React app to use the new API URL provided by Render.
I am seeking guidance and assistance from the community to resolve these issues. Specifically, I would appreciate advice on:
- CORS Configuration: Tips on configuring CORS correctly on the backend deployed on Render. I have already ensured that CORS is enabled, but the issue persists.
- API Communication Failure: Suggestions for debugging and resolving the communication failure between the React app and the backend. I’ve already checked for typos and errors.
- Previous Deployment (Heroku): The application worked without CORS issues when the backend was hosted on Heroku.
Any insights, tips, or recommendations would be greatly appreciated. If anyone has encountered similar issues or has expertise in CORS configuration and API communication, your assistance would be invaluable.
Thank you in advance for your time and support!