React前端调用Flask服务器时遭遇CORS问题求助

嗨，我看了你遇到的React调用Flask后端的问题，先帮你理清楚现有代码的情况，再说说可能的问题点和解决办法～

你的前端请求代码（someFile.js） #

export const getAnswer = async (param) => {
  let message = {
    tag: "1",
    content: "If you see this message, fetch is not working."
  };

  fetch(`http://127.0.0.1:5000/?message=${param}`)
    .then(response => response.text())
    .then(data => {
      message = {
        tag: "1",
        content: data
      }
    }
  )

  return message;
};

你的Flask后端代码（flaskFile.py） #

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def handle_request():
    m = request.args.get('message', default = "Default")
    print(m)

    # logic...

    # response.headers.add("Access-Control-Allow-Origin"...

首先，我发现几个关键问题，可能是导致你觉得CORS有问题的核心原因：

1. Flask后端没有返回响应
   你的handle_request函数目前只打印了参数，完全没有返回任何内容给前端。这种情况下，请求会直接报错（通常是500状态码），浏览器有时候会把这类错误和CORS问题混在一起显示。你需要给这个路由加上返回值，比如：

   @app.route('/')
   def handle_request():
       m = request.args.get('message', default = "Default")
       print(m)
   
       # 这里写你的业务逻辑，比如处理参数得到结果
       processed_result = f"你传的参数是：{m}"
   
       # 必须返回响应内容
       return processed_result
   

2. 前端异步请求处理错误
   你用了async声明函数，但里面的fetch还是用then链式调用，而且直接return初始的message——这时候return的是还没等到请求结果的初始值，根本拿不到后端返回的数据。应该用async/await的正确写法，或者把return放到then里面，推荐前者更清晰：

   export const getAnswer = async (param) => {
     try {
       // 等待fetch请求完成
       const response = await fetch(`http://127.0.0.1:5000/?message=${param}`);
       // 等待响应转成文本
       const data = await response.text();
       // 返回处理后的结果
       return {
         tag: "1",
         content: data
       };
     } catch (error) {
       // 捕获请求出错的情况，方便调试
       console.error("请求失败啦：", error);
       return {
         tag: "1",
         content: "If you see this message, fetch is not working."
       };
     }
   };
   

3. CORS配置的补充检查
   虽然你已经用了CORS(app)，如果还是出现CORS错误，可以试试更明确的配置。比如你的React一般跑在http://localhost:3000，可以指定只允许这个来源访问：

   # 替换原来的CORS(app)
   CORS(app, origins="http://localhost:3000")
   

   开发环境下如果需要临时允许所有来源（生产环境别这么干），可以写：

   CORS(app, origins="*")
   

最后记得打开浏览器的控制台，看看具体的错误信息——如果是CORS相关的，会明确提示是来源不允许还是缺少某个响应头，这样能更快定位问题～

备注：内容来源于stack exchange，提问作者awdreg