Python CORS在前端和后端使用Docker容器时失败

下面的代码在docker容器外部运行良好。现在我想为后端添加一个容器，为fronded添加另一个容器。因此，我创建了两个DockerFile（可能不感兴趣）和下面的docker compose文件。我更改axios.get（

http://127.0.0.1:5000/api/test）

to

axios.get（'http://backend:80/api/test）

在vue组件中。我能够从前端容器ping后端容器，并且能够通过curl接收api结果。 但axios无法再发出此api请求。在firefox控制台中，我得到一个错误：

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

但我可以在网络中的一台计算机上运行后端外部docker，在另一台计算机上运行前端。所以，在docker之外，跨原点是没有问题的。 这里有什么问题？我不知道

---

docker-compose.yml

---

原始代码 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)

fronded（仅vue.js组件）

消息是：{{msg}
从“axios”导入axios
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
消息：“”
}
},
创建（）{
axios.get（）http://127.0.0.1:5000/api/test）。然后（响应=>{
console.log（response.data）
this.msg=response.data.foo
}).catch（错误=>{
console.log（错误）
})
}
}

您似乎误解了如何从所有容器外部引用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进行测试。

您可以使用docker-compose.yaml中的“链接”。因此，它看起来与此类似：

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

因此，在此之后，您可以使用Vue js

devServer: {
   proxy: 'http://xxxdjango'
}

及

---

您是否尝试使用flask\u cors文档中所示的特定路线的

@cross\u origin（）

装饰器，而不是使用

cors

对象？我只是好奇，这是否也是因为docker设置在外部工作而导致的。您是否使用浏览器访问前端服务，然后访问后端服务？@NeilTwist是的，我已发布前端容器的端口90，并使用firefox访问。我在控制台中得到了错误消息。好的，请看我的答案。前端容器应该与后端容器通信，因此我使用主机名

后端
，因为两个容器都使用桥接网络。是的，我可以看到消息是：但消息无法加载，因为cors错误，Firefox中的错误意味着错误发生在Firefox中？你能看到开发者控制台中的网络选项卡吗？不，我在控制台中看到的错误来自前端，该前端使用
console.log（error）
记录axios错误，因此，你可以看到请求来自Firefox，因此请求的参考框架是浏览器，这意味着您需要从外部docker引用服务。
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

devServer: {
   proxy: 'http://xxxdjango'
}

axios.get('/api/test')