30

The following code is working great outside docker containers. Now I would like to add a container for the backend and another for the frondend. So I create two Dockerfiles (that are probably uninteresting) and the following docker-compose file. I change axios.get('http://127.0.0.1:5000/api/test') to axios.get('http://backend:80/api/test') in the vue component. I'm able to ping the backend container from the frontend container and I'm able to receive the api result via curl. But axios is not able to make this api request anymore. And in the firefox console I get the error:

Error: "Network Error"
Cross-Origin request blocked [...] Reason: CORS request did not succeed

But I'm able to run the backend outside docker at one computer in my network and the frontend at another. So Cross-Origin is no problem outside docker. What's the problem here? I have no idea.


docker-compose.yml

version: '2'
services:
    backend:
        build: ./backend
        container_name: backend
        ports:
          - "80:80"
        environment:
          - FLASK_APP=app/main.py
          - FLASK_DEBUG=1
          - 'RUN=flask run --host=0.0.0.0 --port=80'
        networks:
          - some-net

    frontend:
        build: ./frontend
        container_name: frontend
        ports:
          - "90:80"
        networks:
          - some-net

networks:
    some-net:
        driver: bridge

original code

backend in python

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources=r'/api/*')

@app.route('/api/test')
def test():
    return jsonify({
        "foo": "bar"
    })

if __name__ == '__main__':
    app.run(debug=True)

frondend (only vue.js component)

<template>
<div class="hello">
    <h1>Message is: {{ msg }}</h1>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: 'HelloWorld',
data () {
    return {
        msg: ''
    }
},
created () {
    axios.get('http://127.0.0.1:5000/api/test').then(response => {
        console.log(response.data)
        this.msg = response.data.foo
    }).catch(error => {
        console.log(error)
    })
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
4
  • Did you try using the @cross_origin() decorator as shown in the flask_cors docs for a specific route, instead of using the CORS object ? I'm just curious if that also fails
    – Evya
    Commented Sep 13, 2018 at 8:52
  • It seems this is something to do with docker setup since it works outside. Are you using a browser to hit the frontend service, then the backend service?
    – Neil Twist
    Commented Sep 13, 2018 at 8:53
  • @NeilTwist Yes I have published port 90 of the frontend container and use firefox to a access 127.0.0.1:90. There I get the error message in the Console. Commented Sep 13, 2018 at 8:59
  • Ok, See my answer then.
    – Neil Twist
    Commented Sep 13, 2018 at 8:59

2 Answers 2

22

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.

8
  • 1
    The frontend container should communicate with the backend container, so I use the hostname backend because both containers are using a bridge network. Commented Sep 13, 2018 at 9:02
  • Yes, I can see <h1>Message is: </h1> but the message is not able to load, because of that cors error Commented Sep 13, 2018 at 9:05
  • The error in Firefox implies that the error happens in firefox? Can you see the network tab in the developer console?
    – Neil Twist
    Commented Sep 13, 2018 at 9:09
  • No the error that I can see in the console comes from the frontend that logs the axios error with console.log(error) Commented Sep 13, 2018 at 9:11
  • 4
    So, you can see that the request is coming from Firefox, so the reference frame for the request is the browser, which means that you need to refer to the service from outside docker.
    – Neil Twist
    Commented Sep 13, 2018 at 9:16
-4

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')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.