title: CORS failes when using Docker containers for frontend and backend
body: <p>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 <code>axios.get('http://127.0.0.1:5000/api/test')</code> to <code>axios.get('http://backend:80/api/test')</code> 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.
  <strong>But</strong> axios is not able to make this api request anymore. And in the firefox console I get the error:</p>
  
  <pre><code>Error: "Network Error"
  Cross-Origin request blocked [...] Reason: CORS request did not succeed
  </code></pre>
  
  <p>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.</p>
  
  <hr>
  
  <h2>docker-compose.yml</h2>
  
  <pre><code>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
  </code></pre>
  
  <hr>
  
  <h2>original code</h2>
  
  <p><strong>backend in python</strong></p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>frondend (only vue.js component)</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="hello"&gt;
      &lt;h1&gt;Message is: {{ msg }}&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
  name: 'HelloWorld',
  data () {
      return {
          msg: ''
      }
  },
  created () {
      axios.get('http://127.0.0.1:5000/api/test').then(response =&gt; {
          console.log(response.data)
          this.msg = response.data.foo
      }).catch(error =&gt; {
          console.log(error)
      })
  }
  }
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;&lt;/style&gt;
  </code></pre>