CORS issue when accessing API in Dockerized React application

Other Questions RapidAPI
1

I’m encountering a CORS problem with my React application after I containerized it with Docker.

The application operates correctly on my local machine. However, once I deployed it to Docker at port 3003, I started receiving this error:

Access to XMLHttpRequest at ‘https://keto-diet.p.rapidapi.com/?protein_in_grams__lt=15&protein_in_grams__gt=5’ from origin ‘http://localhost:3003’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘http://localhost:3000’ that does not correspond to the origin being used.

Here’s the relevant part of my React code:

const requestOptions = {
  method: "GET",
  url: "https://keto-diet.p.rapidapi.com/",
  params: {
    protein_in_grams__lt: '15',
    protein_in_grams__gt: '5'
  },
  headers: {
    "X-RapidAPI-Key": "yourapikeyishere",
    "X-RapidAPI-Host": "keto-diet.p.rapidapi.com",
  },
};

const ProductList = () => {
  const [productList, setProductList] = useState([]);
  
  const fetchProducts = async () => {
    const response = await axios.request(requestOptions);
    setProductList(response.data);
  };

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

What steps should I take to resolve the CORS issues? Any guidance would be appreciated.

2

Your CORS issue happens because RapidAPI’s server only accepts requests from localhost:3000, but your Docker container runs on port 3003. Quick fix: change your Docker config to -p 3000:3000 so your app runs on the right port.

Better long-term solution? Set up a backend server as a proxy for API calls. It’ll handle CORS properly and centralize all your API requests. The port change works fine for development, but you’ll need a proper backend when you go to production.

3

Had the same issue when I containerized my app last year. It’s not just the port mismatch - RapidAPI’s whitelist restrictions are a pain. Skip changing ports or building proxy servers. Set up environment variables for your API endpoints instead. Create a .env file in your container with REACT_APP_API_BASE_URL=http://localhost:3000 and update your axios calls to use that base URL. You can control which origin the API sees this way. Or check if RapidAPI lets you add multiple origins in their dashboard. Some providers let you whitelist both localhost:3000 and localhost:3003 at once. Worth checking before you build workarounds. If that doesn’t work, try a development proxy in your package.json with “proxy”: “http://localhost:3000” - routes API calls through the dev server and keeps the expected origin.

4

Been there way too many times. Port mapping and proxy servers work, but you’ll hit the same problem when deploying to different environments.

Here’s what actually works: stop fighting CORS and move your API calls server-side. Set up a serverless workflow to handle RapidAPI requests.

I built something similar for a nutrition app last month. Created a Latenode workflow that takes protein parameters from my frontend, calls RapidAPI with proper headers, and returns clean JSON. No CORS issues since server-to-server calls don’t have origin restrictions.

Your React code barely changes. Instead of calling RapidAPI directly, hit your Latenode webhook. Same parameters, same response format, but now it works from any port or domain.

Bonus: you can add request caching so repeated calls don’t burn through your RapidAPI quota. If RapidAPI goes down, switch providers without touching frontend code.

Takes about 10 minutes to set up and deploy.

5

cors-anywhere is probably your easiest fix. Just slap https://cors-anywhere.herokuapp.com/ in front of your API URL and it’ll skip the origin check. Wouldn’t use it in production, but it’ll get you moving while you sort out the backend properly.

6

RapidAPI only allows requests from localhost:3000, but your Docker container runs on 3003. That’s your CORS problem right there.

Sure, you could map Docker back to port 3000, but that’s just a bandaid. The real issue? Making API calls directly from the browser always causes CORS headaches when you switch environments.

I’ve hit this same wall tons of times. Best fix is routing API calls through a backend service that handles external requests. Browser only talks to your server = no CORS drama.

Skip building a custom backend though. Use Latenode to create a simple API proxy instead. Set up a workflow that takes your frontend requests and forwards them to RapidAPI. Takes maybe 5 minutes, plus you get error handling and logging built-in.

Workflow accepts your protein parameters, hits keto-diet.p.rapidapi.com with your API key, returns results. Your React app just calls the Latenode endpoint instead of RapidAPI directly.

Bonus: you can add caching, rate limiting, or data transformation later without touching frontend code.