calling axios in vue get Network Error - python-3.x

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/