"message":"Not allowed by CORS" Environment Variable Issue

[tas09009]

Hello Everyone!

I'm getting this {"error":{"message":"Not allowed by CORS"}} message every time I go on http://localhost:8080/. I've followed all the steps of creating a .env file and adding environment variables (like this: LOCAL_CORS="http://localhost:8080") but cannot seem to get rid of this error.

These are the two articles I was following for reference: Environment variables with Node.js Working with Environment Variables in Node.js

Is there something i'm missing? I tried creating a .config file but that didn't seem to work.

Any suggestions would be very helpful!

[aubundy]

Are you running both the frontend and backend locally with the frontend set up to be run from port 8080?

[tas09009]

Ahh I assumed I could just just the back end on it's own to retrieve json data. Ok I am running the front end and back end locally now but it's still giving me the same errors:

Here is what I did:

1. Front end: cloned repo, added .env file with REACT_APP_AXIOS_URL='http://localhost:8080'
2. npm install for front end
3. npm start for both front and back end
4. http://localhost:8080/ is still giving me the same thing: {"error":{"message":"Not allowed by CORS"}}
5. http://localhost:3000/ does load but gives me this message:

Not sure if I'm still missing something? Btw, once I get this sorted out, I'm happy to add some of these steps to the `README.md file. I see that there is already a new commit for additional instructions for the front end.

Thanks!

[aubundy]

Sorry about the confusion! With the frontend running on port 3000, the backend LOCAL_CORS variable should be set to http://localhost:3000 and REACT_APP_AXIOS_URL should include /api at the end.

However, I just made a change to make it possible to make backend requests with REST tools (like Postman) and by loading the API results in the browser. (Previously, the CORS settings were too strict). To do this, set LOCAL_CORS to localhost:8080 or whatever your local port is set to. I will add details about this to the CONTRIBUTING.md file.

[tas09009]

Apparently I did those steps but not at the same time (whoops). I'm able to run the front end now!

My bad, I assumed I could start using Postman right away. I did change LOCAL_CORS to localhost:8080 but couldn't see any API results, actually it still gives me the same "Not allowed by CORS" error. (This was after pulling from the master this morning). I also tested it out with the /api path at the end but same thing. That was the only thing I assumed I needed to change? I played around with changing the REACT_APP_AXIOS_URL too but I don't think that's it.

Wonder if this is a MySQL connectivity issue or something. I'll keep searching.

[aubundy]

One thing I should clarify - right now, it will only work with either the frontend running and making requests or through a tool like Postman making requests, but not both at the same time (I probably should have done this yesterday, but will add this possibility later today).

[aubundy]

If you have installed MySQL 8.0, you'll need to change authentication setting to legacy. There's instructions for Windows' MySQL workbench in CONTRIBUTING.md and this link has more info as well

[tas09009]

Yeah I ran only the backend when testing with Postman and I've also changed the authentication to legacy as well. I think I'm the only one with this CORS issue so it must be something local on my computer; it's probably really silly. I'll keep testing out other things/googling. I'll also go through the CONTRIBUTING.md again.

Thanks for responding so quickly!

[tas09009]

Ok I figured it out. I had to change my LOCAL_CORS from http://localhost:8080 to localhost:8080. I now get an error of {"error":{"message":"Not Found"}} on the main page but I think that's fine because I can still retrieve data from the other API endpoints?

Either way, I'm all set to start contributing :)