前后端分离项目中，后端使用 Flask 编写接口时，通常需要处理跨域请求（CORS）以及前端联调阶段的接口访问问题。以下记录基本配置方式。

一、跨域问题产生原因

浏览器出于安全考虑，禁止前端脚本直接请求不同源的资源。不同源包括：

  • 不同协议（http vs https）
  • 不同域名
  • 不同端口

联调开发时，常见报错：
Access to XMLHttpRequest at 'http://localhost:5000/api/xxx' from origin 'http://localhost:5173' has been blocked by CORS policy

二、使用 Flask-CORS 快速解决

安装扩展：

pip install flask-cors

配置方式一：全局允许跨域

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

配置方式二：限定路径、方法、来源

from flask_cors import CORS

CORS(app, resources={
    r"/api/*": {"origins": "http://localhost:5173"}
})

三、接口示例

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

前端可通过 fetch / axios 请求该接口：

fetch('http://localhost:5000/api/hello')
  .then(res => res.json())
  .then(data => console.log(data))

或使用 axios：

axios.get('http://localhost:5000/api/hello')
     .then(res => console.log(res.data))

四、调试常见场景

  • Flask 开启 debug 模式后自动重启（使用 app.run(debug=True)）
  • 避免浏览器缓存导致调试数据不同步，可使用 network disable cache
  • 前端建议统一封装接口请求函数，便于联调和切换环境

五、小结

通过 Flask-CORS 插件可以快速支持跨域访问，适用于本地开发与正式环境分离部署。建议后期根据实际情况限制来源、方法等跨域策略。