calling axios in vue get Network Error

Question

I working on one small project. Server side realized on Python as RESTFul server. Front-end I try do with Vue. I'm new in Vue. And when I try to fetch data fro service I get Error: Network Error. And I can't found mistake.

Irony is that I see fetched data in browser in network->Response tab. But not on HTML page. On the page I see Error: Network Error only.

I can fetch data with browser directly, by url. I can fetch data with CURL Also I can fetch data with this Vue code from third-part services! But not from local URL.

FLASK SERVER CODE

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

VUE code

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
                    })
            }
        }
})

I'm a little bit confused. What is wrong with my code?

Answer 1

You have mentioned that you are getting this error:

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).

This means you have a CORS (Cross Origin Resource Sharing). Which means you are trying to send and/or receive request from two different domains/ports.

So, for example if you send a GET request from localhost:8080 to localhost:5000 you'll get the same error, because you are trying to share resources across different origins:

So, one way to fix this problem is to instruct your back-end server (127.0.0.1:5000) which I assume is running a flask app to allow you to send it a GET request from (127.0.0.1:8080).

So, configure your flask app with this CORS guide http://flask-cors.readthedocs.io/en/latest/