在vue中调用axios得到网络错误

Question

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

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

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

烧瓶服务器代码

@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（跨源资源共享）。这意味着您正在尝试发送 and/or 从两个不同的 domains/ports 接收请求。

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

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

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

在vue中调用axios得到网络错误

calling axios in vue get Network Error

flask

python-3.x

flask-restful

vue.js