Access to fetch at 'http://localhost:8000/api/v1' from origin 'http://0.0.0.0:8000' has been blocked by CORS policy

[will-wright-eng]

This issue is well documented but my attempts have been unsuccessful... any suggestions are welcome!

Recreating Error

cookiecutter gh:Buuntu/fastapi-react --no-input
cd fastapi-react-project

modified files before running build script (in order to address prior errors):

frontend/Dockerfile line 7

RUN npm install --legacy-peer-deps

docker-compose.yml line 37

  # flower:
  #   image: mher/flower
  #   command: celery flower --broker=redis://redis:6379/0 --port=5555
  #   ports:
  #       - 5555:5555
  #   depends_on:
  #     - "redis"

cd fastapi-react-project
chmod +x scripts/build.sh
./scripts/build.sh

• open: http://0.0.0.0:8000/
• click: "Click to make request to backend"

Access to fetch at 'http://localhost:8000/api/v1' from origin 'http://0.0.0.0:8000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

GET http://localhost:8000/api/v1 net::ERR_FAILED api.ts:4 <-- fetch()

Attempts

• adding Access-Control-Allow-Origin to nginx
• adding proxy to package.json
• adding no-cors to fetch()
• adding CORSMiddleware to FastAPI app

System

➜ uname -v
# Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
➜ docker-compose version
# Docker Compose version v2.13.0

[will-wright-eng]

https://stackoverflow.com/questions/75283556/access-to-fetch-at-http-localhost8000-api-v1-from-origin-http-0-0-0-080/75283573#75283573