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>
@cross_origin()
decorator as shown in the flask_cors docs for a specific route, instead of using theCORS
object ? I'm just curious if that also fails