Dockerized React app encountering CORS issues with RapidAPI

Other Questions RapidAPI
1

I’m stuck with a CORS problem in my React app. It was fine on my local machine, but after containerizing it with Docker and running it on port 3003, I’m getting this error:

Access to XMLHttpRequest at 'https://diet-api.example.com/query?min_protein=5&max_protein=15' from origin 'http://localhost:3003' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin.

Here’s a simplified version of my React code:

const apiConfig = {
  method: 'GET',
  url: 'https://diet-api.example.com/query',
  params: {
    min_protein: '5',
    max_protein: '15'
  },
  headers: {
    'API-Key': 'your-api-key-here',
    'API-Host': 'diet-api.example.com'
  }
};

function FoodList() {
  const [foods, setFoods] = useState([]);

  async function fetchFoods() {
    const result = await axios(apiConfig);
    setFoods(result.data);
  }

  useEffect(() => {
    fetchFoods();
  }, []);

  // Render food list here
}

I’ve tried a few things but can’t seem to fix it. Any ideas on how to resolve this CORS issue in my dockerized app? Thanks for any help!

2

The CORS issue appears to be a configuration problem with the API, which is set to allow requests only from http://localhost:3000 while your application is running on http://localhost:3003. This mismatch is preventing the browser from accepting the response. One approach to resolve this is to contact the API provider and request that http://localhost:3003 be added as an allowed origin. Alternatively, if you have control over the API or the Docker setup, you could adjust the network configuration—perhaps through a reverse proxy—to ensure the origins align. It is important to maintain proper security practices when making these changes and verify that your environment variables and port exposures are correctly configured.

3

hey oscar, sounds like a headache! have u tried using a cors proxy? it’s like a middleman that can bypass those pesky restrictions. just add somethin like https://cors-anywhere.herokuapp.com/ before ur API url. might not be perfect but could help u out in a pinch. good luck man!

4

Hey Oscar64, I feel your pain. I ran into a similar issue when deploying my React app in a Docker container. One solution that worked for me was setting up a reverse proxy using Nginx.

Here’s what I did:

  1. Created an Nginx config file to handle the CORS headers
  2. Added an Nginx container to my Docker Compose setup
  3. Configured it to proxy requests to my React app

This way, Nginx intercepts the requests and adds the necessary CORS headers before forwarding them to your app. It’s a bit more setup, but it solved my CORS headaches without needing to modify the API.

Another option is to use a CORS proxy service as a temporary fix, but be cautious with sensitive data. Long-term, working with the API provider to whitelist your domain is the most robust solution.

Hope this helps! Let me know if you need more details on the Nginx setup.