CORS Error From Docker Flask Container

Hello, I currently have a Flask/React App that I am using in tandem with Docker. I wrote Dockerfiles for both the backend (Flask) and frontend (React), and a docker-compose.yml to combine the two together and initialize my app when I use the command “docker-compose up”.

I am able to start the app correctly, but when I try to login and send the api request to the backend, I am presented with the following CORS error:

Access to XMLHttpRequest at '' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am not having this error in my application when run out of the containers, so I am pretty positive it is related to the configuration of the Dockerfiles/ports. Here are my Dockerfiles and the docker-compose.yml. I know my flask app itself is configured with CORS to avoid this error when the app is not run in the container.


FROM python:3



COPY ./requirements.txt .

RUN pip install -r requirements.txt

COPY . .

CMD ["python", ""]


FROM node:14-slim

WORKDIR /user/src/app

COPY ./package.json ./
COPY ./package-lock.json ./

RUN npm install

COPY . .


CMD ["npm", "start"]


version: "3.9"
    build: ./backend
    - "80:5000"
    - ./backend:/app
      FLASK_ENV: development
    build: ./frontend
      - "3000:3000"
      - ./frontend:/user/src/app
      - server

Below is the partial frontend JavaScript function that handles the data being sent to the backend:

const handleSubmit = async (event) => {
    try {
      const payload = {name:username, password:password}
      const response = await"", payload, {headers:{
        'Access-Control-Allow-Origin' : '*',
        'Content-Type': 'application/json'

Any folks out there have encountered a similar issue and may have potential recommendations?

Did you ever find out how to fix this? I’m having the same problem and am beyond frustrated. I’ve read damn near every post I could find on flask-cors and asked chatgpt to troubleshoot for me. So far no luck

Hi Mike, I was able to get this resolved. My solution to fixing this error was a few steps:

  • In my file where I tell the app to run, I needed to specify the host address as follows =>“”, debug=True)

  • On my frontend requests, I had to change the address to not include the port number, so now it looks as follows => await“http:”, …)

My best guess is setting the host to all addresses and not specifying the port number in my request allowed for Docker to successfully pick up on the request. Hope this helps!