I have a Django backend and a React frontend set up in separate Docker containers, both running on the same Docker network. The backend is accessible via the DNS backendServer and the frontend via frontendServer.
I'm encountering a CORS issue when trying to make API requests from my React frontend to my Django backend. The error message in the browser console is:
Access to XMLHttpRequest at 'http://localhost:8000/api/project/?page=1' from origin 'http://192.168.1.63:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
Is there something else I might be missing or another configuration I need to make to allow requests from my React frontend to my Django backend?
Any help or suggestions would be greatly appreciated. Thank you!
I've tried the following steps to resolve the issue:
- Installed and configured the django-cors-headers middleware in my Django project.
- Added 'corsheaders' to INSTALLED_APPS and 'corsheaders.middleware.CorsMiddleware' to MIDDLEWARE in my settings.py file.
- Set CORS_ALLOWED_ORIGINS to include my frontend URL (http://192.168.1.63:3000).
- Ensured that my Docker containers are on the same network.
Despite these steps, I'm still encountering the CORS issue. The 192.168.1.63 is my dev server that hosts the docker services.
Try removing the "CORS_ALLOWED_ORIGINS" settings you currently have and replace with CORS_ALLOW_ALL_ORIGINS = True since you are running development server.