以下代码在docker容器外工作得很好.现在我想为后端添加一个容器,为后端添加另一个容器.所以我创建了两个Dockerfiles(可能是无趣的)和下面的docker-compose文件.我将axios.get(‘http://127.0.0.1:5000/api/test’)更改为vue组件中的axios.get(‘http：// backend：80 / api / test’).我能够从前端容器ping后端容器,我能够通过curl接收api结果.
但是axios再也无法提出这个api请求了.在firefox控制台中我收到错误：
Error: "Network Error"
Cross-Origin request blocked [...] Reason: CORS request did not succeed
但我能够在我的网络中的一台计算机和另一台计算机的前端运行docker之外的后端.所以Cross-Origin在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
原始代码
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(仅限vue.js组件)
最佳答案
您似乎误以为如何从所有容器外部引用docker容器.
axios.get('http://127.0.0.1:5000/api/test')...
应该参考docker容器正在监听的位置.在容器内部,这确实是后端,但在外部,即在Web浏览器中,它将是对运行容器的主机的引用,后跟端口.由于您已将其安装在主机上的端口80上(前端为90),因此您应该将get更新为：
axios.get('http://{hostname or ip}:80/api/test')
如果它们都在同一主机上运行,那么您可以使用127.0.0.1或localhost进行测试.
