I’m trying to use Flask and Vue to construct web app.

1.Here’s my backend files named backend.py

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/hello')
def hello():
    return jsonify({'message': 'Hello from Flask!'})

if __name__ == '__main__':
    app.run()

2.Here’s my api files named api.js

import axios from 'axios';

const BASE_URL = 'http://localhost:5000/api';

export default {
  fetchHello() {
    return axios.get(`${BASE_URL}/hello`).then(response => response.data);
  }
};

3.Here’s my web app’s interface files named App.vue

<template>
  <div>
    <button @click="fetchHello">Fetch Hello</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import api from './api';

export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    fetchHello() {
      api.fetchHello().then(data => {
        this.message = data.message;
      });
    }
  }
};
</script>

4.then i have a interface like this,there is a button “Fetch hello”
Fetch hello
I expect it would jump out ‘Hello from Flask!”,however there’s an error
error

can anyone tell me where i was wrong? thank you 🙂