Heroku config variable changes when using custom domain

28 Views Asked by At

As the title describes I have recently attempted to deploy my MERN app using heroku and I am setting up the domain sunshine.xyz which I purchased from Godaddy. I have the custom domain set up on heroku and have added the provided DNS target to the CNAME record with www on Godaddy which is what I have read to do at a few different places. This all works fine. My SSL certificate is all good and I can access the frontend of my site by visiting the custom domain at https://www.sunshine.xyz. The issue I am running into is that it appears that my frontend and backend are not communicating which I believe comes down to my config variables in heroku, mainly ORIGIN (used in my CORS configuration) and REACT_APP_SERVER (connects my frontend to backend).

Use of ORIGIN:

const origin = process.env.ORIGIN;
...
app.use(cors({ credentials: true, origin: `${origin}` }));

Use of REACT_APP_SERVER:

const server = process.env.REACT_APP_SERVER;
...
fetch(`${server}/profile`, {
      method: "GET",
      credentials: "include",
    })
    ...

Now I also have a staging environment also set up with heroku which works perfectly fine when simply using the url provided by heroku to view my app as REACT_APP_SERVER and setting ORIGIN to true in my config variables on heroku. However when using this new custom domain, I am not sure what to set these variables as to get my server and frontend to communicate.

For ORIGIN, I have tried https://www.sunshine.xyz, https://sunshine.xyz and true. For REACT_APP_SERVER, I have tried the original url provided by heroku to view my app (https://sunshine-website-43bdd7b1a0fd.herokuapp.com/), the DNS target provided when setting up the domain (infinite-rat-vvdkv7ml30w78pt7a30aor61.herokudns.com), my custom domain (https://www.sunshine.xyz) and none have worked.

Does anybody have any insight on what to set these 2 config variables as to get this to work? Or if you think this is not the issue what could be?

1

There are 1 best solutions below

0
On

So basically for right now I have ORIGIN set to true and REACT_APP_SERVER set to https://www.sunshine.xyz and I redeployed the app and everything seems to be working. Probably not a panacea solution to the problem but its working for now. Also, I understand it's probably not the best thing to have ORIGIN set to true with my CORS configuration because then anybody can make requests to the server so I will work on trying to change that now.