在 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

您已经提到您收到此错误：

跨域请求被阻止：同源策略不允许读取位于 127.0.0.1:5000 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

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

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

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

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