CORS failes when using Docker containers for frontend and backend
It would seem that you are mistaking how to reference docker containers from outside all containers.
axios.get('http://127.0.0.1:5000/api/test')...
Should refer to where the docker container is listening. Inside a container, this would indeed be backend
, but outside, i.e. in your web browser, it would be a reference to the host running the container, followed by the port. Since you've mounted it on port 80 on the host (and 90 for the frontend), you should update the get
to :
axios.get('http://{hostname or ip}:80/api/test')
If it's all running on the same host, then you could use 127.0.0.1
or localhost for your testing.
You can use "links" inside docker-compose.yaml. So it will look similar to this:
xxxdjango: image: xxx_django:dev ports: - "8000:80"xxx_ui: image: xxx_ui:dev volumes: - ./xxx_ui/src:/app/src - ./xxx_ui/public:/app/public ports: - "8080:8080" links: - xxxdjango
So after this, you can use for Vue js
devServer: { proxy: 'http://xxxdjango'}
and
axios.get('/api/test')