This issue is well documented but my attempts have been unsuccessful… any suggestions are welcome!
- cookiecutter project on Github: Buuntu/fastapi-react
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
Additional Info
>Solution :
Don’t open http://0.0.0.0:8000/ in your browser; open http://localhost:8000/ instead. That way the origin matches.