Can't fetch data in my MERN app

1

Hello, I am having trouble running my MERN app properly.

I created a new Web Service for the backend, and a new Static Site for the frontend. I set the environment variables as well. However, fetching data from database(MongoDB) fails.
I am using React and Redux for frontend.

If anybody has the similar issue and solved it, please let me know the tip.
Thank you!

2

Hi there,

Thanks for reaching out.

It sounds like might be trying to use environment variables on a Static Site at runtime. Environment variables on Static Sites will only be available at build time while the static files are being created. You wouldn’t be able to access environment variables once your static React site is deployed.

The usual implementation with the set-up you described would be a Web Service backend/API that connects to MongoDB and the static frontend makes calls to your backend. For example, a React Static Site on my-frontend-123.onrender.com would make client-side JS calls to my-backend-123.onrender.com, where the backend can query MongoDB directly and return the data to the frontend.

If that doesn’t sound like your issue, please could you share some specific examples of your set-up and the issue you are experiencing. That may help us troubleshoot it with you, e.g. any logs/errors/output, specific URLs, service name(s)/ID(s), reproduction steps, etc. If you don’t want to share these details on the community forum, please feel free to raise a ticket with support@render.com

Alan

3

Hello Alan,

Thank you for your explanation.

I understood the flow. I set the environment variable to connect Mongo DB on the backend side(Web Service).

And now, I have a new error about cors as below:
header is present on the requested resource.

I got the idea from searching the similar issue here and tried to set “Access-Control-Allow-Origin” header on the Static Site. However, the error still shows up and the data cannot be fetched.

4

The Access-Control-Allow-Origin header would need to be in the response from your backend, not your frontend.

Alan

5

Thank you Alan for help!
I removed the setting of the Access-Control-Allow-Origin header from the Static Site, and tried to set up once again from scratch. Then it all worked. I might have missed something or had a wrong setting.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.