使用Flask与Vue构建Web应用时遭遇未捕获运行时错误求助

问题根源 #

你的问题大概率是**跨域资源共享（CORS）**导致的：Flask后端运行在localhost:5000，而Vue前端通常运行在localhost:8080（或其他端口），浏览器的同源策略会阻止不同端口的跨域请求，从而触发未捕获的运行时错误。

解决方案步骤 #

1. 给Flask后端配置CORS支持

• 首先安装flask-cors扩展：

pip install flask-cors

• 修改你的backend.py，添加CORS配置：

from flask import Flask, jsonify
from flask_cors import CORS  # 导入CORS扩展

app = Flask(__name__)
CORS(app)  # 允许所有域名的跨域请求，生产环境可指定具体域名

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

if __name__ == '__main__':
    app.run(debug=True)  # 开启debug模式便于调试

2. 给前端请求添加错误捕获

你的Vue代码未处理请求失败的情况，这会导致未捕获的Promise错误，修改App.vue的fetchHello方法：

<template>
  <div>
    <button @click="fetchHello">Fetch Hello</button>
    <p>{{ message }}</p>
    <p style="color:red;">{{ errorMsg }}</p> <!-- 用于显示错误信息 -->
  </div>
</template>

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

export default {
  data() {
    return {
      message: '',
      errorMsg: ''
    };
  },
  methods: {
    fetchHello() {
      this.errorMsg = ''; // 清空历史错误信息
      api.fetchHello()
        .then(data => {
          this.message = data.message;
        })
        .catch(err => {
          this.errorMsg = '请求失败：' + err.message;
          console.error(err); // 控制台查看详细错误日志
        });
    }
  }
};
</script>

3. 验证端口一致性

确保Flask后端确实运行在5000端口（app.run()默认端口为5000），如果修改了后端端口，需同步更新api.js里的BASE_URL。

测试流程 #

1. 重启Flask后端服务
2. 重启Vue前端服务
3. 点击"Fetch Hello"按钮，即可正常显示"Hello from Flask!"

内容的提问来源于stack exchange，提问作者quqi_ovo