python-3.x - 在vue中调用axios得到网络错误

Question

我在做一个小项目。服务器端在 Python 上实现为 RESTFul 服务器。前端我尝试用 Vue 做。我是 Vue 的新手。当我尝试从服务中获取数据时，我得到了错误:网络错误。而且我找不到错误。

具有讽刺意味的是，我在浏览器中的网络 -> 响应选项卡中看到了获取的数据。但不是在 HTML 页面上。在页面上，我只看到错误:网络错误。

我可以通过 url 直接使用浏览器获取数据。 我可以使用 CURL 获取数据 我还可以使用此 Vue 代码从第三方服务中获取数据!但不是来自本地 URL。

flask 服务器代码

@app.route('/', methods=['GET'])
def get_data_list():
   return 'Test'

VUE代码

var app = new Vue({
    el: '#app',
    data: {
        data_list: '...',
        url_A: "#home",
        url_B: '#page2',
        url_C: '#settings'
    },

    created: function () {
        this.loadData()
    },

    methods:
        {
            loadData: function () {
                this.data_list = "Loading...."
                var app = this
                axios.get('http://127.0.0.1:5000/')
                    .then(function (response) {
                        app.data_list = response.data[0]
                    })
                    .catch(function (error) {
                        app.data_list = "An error occurred. "+error+" / Error ststus: "+error.response
                    })
            }
        }
})

我有点困惑。我的代码有什么问题？

Answer 1

您提到您遇到了这个错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 127.0.0.1:5000. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这意味着您拥有 CORS(跨源资源共享)。这意味着您正在尝试从两个不同的域/端口发送和/或接收请求。

因此，例如，如果您从 localhost:8080 向 localhost:5000 发送一个 GET 请求，您将得到相同的错误，因为您正在尝试跨不同来源共享资源:

因此，解决此问题的一种方法是指示您的后端服务器 (127.0.0.1:5000)，我假设它正在运行一个 flask 应用程序，以允许您从 (127.0.0.1:8080) 向它发送 GET 请求).

因此，使用此 CORS 指南配置您的 Flask 应用 http://flask-cors.readthedocs.io/en/latest/