How to make my backend and frontend into the same domain?

1

Hi, today is my first day using render.com to deploy both my frontend and backend.

Since they are in different domains, there will be cross-domain cookies and I don’t want that.

What is the simplest way to make them into the same domain? Please assume I have no knowledge about putting deployment into a domain. Or point me in a direction for being able to do this. I have some time constraints so preferably I can accomplish this in one or two days.

2

If you’re still looking for help on this, it might help if you provide a few key details such as, what frameworks you are using for front/back, i.e., React/Node, etc.
Also, if you have not deployed yet, how are they on the same domain? Are you talking about having react on say, localhost:3000 and then node on localhost:5000?

3

Hello, this is my first day on Render as well, and also my first time deploying a MERN app with separate client and server files, so I am really confused. Since I am on the free version until I get the hang of this, the builds and deploys are taking forever (1+ hour), so I’m hoping to get this resolved before I try again.

To answer @I-keep-trying, yes, in my case I do use localhost:3000 for the client and localhost:8000 for the development environment, and everything is working great there. I have tried deploying the client to mydomain and the server to mydomain-api and added all the environment variables, but they are not talking to each other. I keep getting a 404 not found when trying to call the backend through axios. I get the following error in Chrome which is a CORS issue:

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

In my server index.js file I have CORS set to the below code, but I’ve tried several other settings as well and none of them seem to work correctly, so I’m hoping maybe someone can help me out with what I need to do.

app.use(
	cors({
		origin: [process.env.CLIENT_URL],
		credentials: true,
	})
);

Where CLIENT_URL is set in the Environment settings to mydomain. I guess I should also mention that I have setup a custom domain as well and not using the onrender.com site.

Thank you

4

I finally figured out the CORS issue. I used this code to fix it:

app.use(
	cors({
		origin: function (origin, callback) {
			// allow requests with no origin
			// (like mobile apps or curl requests)
			if (!origin) return callback(null, true);
			if (allowedOrigins.indexOf(origin) === -1) {
				var msg = 'The CORS policy for this site does not allow access from the specified Origin.';
				return callback(new Error(msg), false);
			}
			return callback(null, true);
		},
	})
);

and put allowedOrigins in a const earlier in the code. That fixed the CORS issue.

5

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