I'm diving into learning React, and in my recent tutorials that use Axios, I keep running into CORS errors. No matter how closely I follow the steps shown, the same issue pops up. For instance, I was following one tutorial and made it to about 28 minutes in when I tried to make my first Axios call, but this error occurred: 'Access to XMLHttpRequest at 'http://localhost:3000/api/auth/register' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.' I checked another tutorial as well, and got a similar error for a different API endpoint. I really need some help figuring out what's causing these CORS errors or how I might work around them!
1 Answer
It seems like you're hitting a CORS issue because your frontend is running on one port (5173) and your backend on another (3000). They're treated as different origins since the port numbers don’t match. You might want to check if you have CORS set up correctly on your backend. You can configure it to allow requests by adding the relevant headers. Just make sure your server recognizes both origins!
That makes sense, but why does it seem to work in the tutorial? The dude looks like he uses the same ports.