从Vite-React调用Flask后端遇CORS跨域错误求助

问题分析 #

你的错误日志明确显示CORS策略拦截了跨域请求：Flask后端返回的响应中缺少Access-Control-Allow-Origin头，导致运行在localhost:5173的React前端无法访问127.0.0.1:5000的接口。你提到尝试用CROS(app)无效，大概率是拼写错误或未正确配置flask-cors库。

正确解决方案 #

方案1：正确配置Flask-CORS #

1. 先安装依赖包：

pip install flask-cors

2. 修改server.py，正确导入并初始化CORS（注意是CORS而非CROS）：

from flask import Flask
from flask_cors import CORS  # 正确导入库

app = Flask(__name__)
CORS(app)  # 全局允许所有跨域请求，开发环境可直接使用

@app.route("/members")
def members():
    return {"members": ["member1", "member2", "member3"]}

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

如果需要更严格的权限控制（仅允许Vite前端的origin），可指定参数：

CORS(app, origins="http://localhost:5173")

方案2：使用Vite代理转发请求（推荐规范场景） #

在Vite项目的vite.config.js中添加代理配置，让前端请求转发到Flask后端，从根源避免跨域：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

同时修改React代码中的请求路径：

fetch("/api/members").then(
  res => res.json()
).then(
  data => {
    setData(data)
    console.log(data)
  }
)

排查要点 #

• 确认flask-cors已正确安装，可通过pip list命令检查包是否存在
• 修改Flask配置后必须重启服务，否则新配置不会生效
• 注意127.0.0.1和localhost在CORS规则中属于不同origin，尽量保持前后端请求地址的主机名一致

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