React 前端调用 Flask 服务器的 CORS 问题

Question

我正在 React 中构建一个应用程序，并且有一些想要运行的 Python 代码，因此我决定将 Python 代码转换为一个小型 Flask 服务器，以便我可以通过 HTTP 请求访问其结果。下面的 Javascript 文件向 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", "*")
    return response

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

每当我通过前端发送测试输入时，例如“Flask 服务器收到此消息了吗？”我在 Flask 服务器终端中看到 Flask 服务器确实正在接收消息并将其打印出来（

handle_request()

中有一条打印语句）。然而，我从

getAnswer

得到的回复仍然是“如果您看到此消息，则说明 fetch 不起作用。”

Is the flask server getting this message?
127.0.0.1 - - [10/Aug/2024 01:31:38] "GET /?message=Is%20the%20flask%20server%20getting%20this%20message? HTTP/1.1" 200 -

因此，我的 Flask 服务器正在从我的前端获取请求，但我的前端似乎没有收到响应。当我在本地测试 Flask 服务器时，一切都运行良好。一些研究让我相信这是 CORS 问题。

我已经尝试使用

flask_cors

来解决我的问题，如代码所示。我还尝试手动将“Access-Control-Allow-Origin: *”标头添加到我的响应中（在已注释掉的行中）。在这两种情况下，我检查了终端，发现响应确实被标头标记了（请注意，我在单独的终端中检查了这一点，即此提取不是从 someFile.js 调用的）。然而，它仍然不起作用。

> fetch(`http://127.0.0.1:5000/?message=${query}`).then(response => response.headers).then(data => console.log(data))
> Headers {
   server: 'Werkzeug/3.0.3 Python/3.8.5',
   date: 'Sat, 10 Aug 2024 08:21:01 GMT',
   'content-type': 'text/html; charset=utf-8',
   'content-length': '275',
   'access-control-allow-origin': '*',
   connection: 'close'
}

有什么解决方案或建议吗？感谢您的帮助。

Answer 1

看起来您正在返回修改前的消息。您正在声明函数异步但不使用其功能，请使用 async...await 模式尝试类似的操作：

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

  const response = await fetch(`http://127.0.0.1:5000/?message=${param}`);
  const data = await response.text();

  if(data) {
    message = {
      tag: "1",
      content: data
    }
  }

  return message;
};