从 localhost:3000 到 127.0.0.1:5000 发出提取请求时出现 CORS 错误

Question

我正在使用 Flask 后端和 React 前端开发一个聊天机器人。我的前端运行在 http://localhost:3000 上，后端 API 运行在 http://127.0.0.1:5000 上。当我通过 /predict 端点的获取请求将输入发送到聊天机器人时，我收到 CORS 错误。完整的错误信息是：

Access to fetch at 'http://127.0.0.1:5000/predict' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

这是我的 React 应用程序中的获取请求：

fetch('http://127.0.0.1:5000/predict', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ message: "Hi" })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Flask 后端应该处理请求并使用聊天机器人模型生成的消息进行响应。这是chat.py中的相关后端代码：

from flask import Flask, request, jsonify
from flask_cors import CORS
import random
import json
import torch
from model import NeuralNet
from nltk_utils import bag_of_words, tokenize

app = Flask(__name__)
CORS(app)  # Enable CORS for all domains

# Chatbot model initialization...

@app.route('/predict', methods=['POST'])
def predict():
    sentence = request.json['message']
    response = get_response(sentence)
    return jsonify({"response": response})

def get_response(msg):
    # Processing the message through the chatbot model...
    
    return "Response based on model prediction..."

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

尽管使用flask_cors为所有域启用CORS，但预检请求似乎失败。如何解决此问题以允许 CORS 请求从我的前端发送到我的后端，确保聊天机器人可以接收和响应消息？

附加信息：

• 后端服务器：Flask，使用flask_cors设置CORS。
• 前端：React 应用程序在本地运行。
• 两个组件都在本地主机上的不同端口上运行。
• 聊天机器人模型涉及 PyTorch 来处理和响应用户输入。

Answer 1

您似乎没有设置任何 cors 标头。 当您使用提取时，您需要为内容类型配置访问控制标头。

app = Flask(__name__)
app.config['CORS_HEADERS'] = 'Content-Type'
CORS(app)

如果这没有帮助，您甚至可以将此标题放在您的回复中：

response.headers.add("Access-Control-Allow-Header", "Content-Type")