Hey folks, I’m stuck with a CORS problem in my React app. It was working fine on my local machine, but now that I’ve put it in a Docker container, it’s acting up.
I’m trying to fetch data from an external API (a keto diet one) in my React component. Here’s a simplified version of what I’m doing:
const fetchRecipes = async () => {
const apiUrl = 'https://example-keto-api.com/recipes';
const params = { minProtein: 5, maxProtein: 15 };
const headers = {
'API-Key': 'mysecretkey123',
'API-Host': 'example-keto-api.com'
};
try {
const response = await fetch(apiUrl, { params, headers });
const data = await response.json();
setRecipes(data);
} catch (error) {
console.error('Failed to fetch recipes:', error);
}
};
useEffect(() => {
fetchRecipes();
}, []);
The app is running on http://localhost:3003 in Docker, but the API seems to only allow requests from http://localhost:3000. Any ideas on how to fix this? I’m pretty new to Docker and CORS, so any help would be awesome. Thanks!
hey dancingfox, hmm docker networking is tricky. maybe try setting up an nginx proxy to re-route your reqest so the api sees it as coming from port 3000. could be a workaround if you can’t change allowed origins. good luck!
CORS issues can be tricky, especially with Docker. Have you considered using a CORS proxy server? It’s a lightweight solution that can bypass these restrictions during development. You could set one up inside your Docker network or use a public one temporarily. Just be cautious with API keys.
Another approach is to modify your Dockerfile to use port 3000 instead of 3003. This might align with the API’s expectations. Remember to update your docker-compose file if you’re using one.
Lastly, check if your API provider allows you to add multiple origins. Some services let you whitelist additional URLs, which could solve your issue without changing your setup.
I encountered similar issues when dockerizing my React app. The trouble was that the external API was set to only accept requests from the expected origin, and the container uses a different port. In my case I first verified whether the API allowed me to whitelist additional origins. If that wasn’t possible, I set up a reverse proxy to forward requests so they appeared to come from an allowed source. For development, a temporary CORS proxy can be useful, but caution is needed when handling sensitive API keys. Matching the container’s port to the allowed origin is another viable solution.