Flask POST请求添加客户端遇CORS及500错误求助

我写了一个Flask的POST请求处理器用来添加客户端，代码如下：

app = Flask(__name__)
CORS(app)


@app.post("/api/clients/")
def addClient():
    data = open('./src/clients.json', 'w+')
    clients = json.load(data)
    req = json.loads(request.data)
    clients.append(req)
    json.dump(clients, data)
    data.close()
    return req

但用浏览器的JavaScript fetch() API调用时：

let u = "http://url/api/clients/n1/"
let b = {
  "client": "n1",
  "details": {
    "address1": "Line1",
    "address2": "line2",
    "city": "city",
    "email": "@",
    "gst": "gstno"
  }
}

const addStudent = async (us, c) => {
const response = await fetch(us, {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    },
    body: c,
});

const data = await response.json();

console.log(data);
};

addStudent(u, b);

浏览器控制台报错：

Access to fetch at 'url/api/clients/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

同时Flask命令行显示500错误：

127.0.0.1 - - [26/Mar/2023 18:09:05] "POST /api/clients/ HTTP/1.1" 500 -
Traceback (most recent call last):
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask\app.py", line 2551, in call
return self.wsgi_app(environ, start_response)
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask\app.py", line 2531, in wsgi_app
response = self.handle_exception(e)
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask_cors\extension.py", line 165, in wrapped_function
return cors_after_request(app.make_response(f(*args, **kwargs)))
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask\app.py", line 2528, in wsgi_app
response = self.full_dispatch_request()
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask\app.py", line 1825, in full_dispatch_request
rv = self.handle_user_exception(e)
File "E:\All_Codes\WEB_DEV\excel-o-meter\venv\lib\site-packages\flask_cors\extension.py", line 165, in wrapped_function
return cors_after_request(app.make_response(f(*args, **kwargs)))

想问是需要加特定请求头，还是Flask端有错误？命令行信息看起来指向CORS问题。

你的问题核心是Flask端代码逻辑错误触发500服务器异常，导致CORS头无法正常返回，浏览器才报CORS错误。具体修复步骤如下：

1. Flask代码的核心问题与修复 #

• 文件打开模式错误：用w+打开文件会直接清空内容，此时json.load(data)会因空文件报错，触发500异常。
• 请求数据处理冗余：Flask提供request.get_json()可直接解析JSON请求体，无需手动json.loads(request.data)。
• 缺失异常处理：未处理文件不存在、JSON格式错误等场景。

修复后的Flask代码：

from flask import Flask, request, jsonify
from flask_cors import CORS
import json
import os

app = Flask(__name__)
CORS(app)  # 全局启用CORS，需细粒度控制可添加参数

@app.post("/api/clients/")
def addClient():
    # 确保目标目录存在
    os.makedirs('./src', exist_ok=True)
    file_path = './src/clients.json'
    
    # 读取现有数据，文件不存在或格式错误则初始化空列表
    try:
        with open(file_path, 'r') as f:
            clients = json.load(f)
    except (FileNotFoundError, json.JSONDecodeError):
        clients = []
    
    # 获取并校验请求数据
    req_data = request.get_json()
    if not req_data:
        return jsonify({"error": "无效的JSON数据"}), 400
    
    # 添加新客户端并写入文件
    clients.append(req_data)
    with open(file_path, 'w') as f:
        json.dump(clients, f, indent=2)
    
    return jsonify(req_data), 201  # 返回201状态码表示创建成功

2. JavaScript代码的问题与修复 #

• 请求URL不匹配：Flask路由是/api/clients/，但JS中URL是/api/clients/n1/，路径不一致会返回404，需修正为一致地址。
• 请求体未序列化：fetch的body必须传入JSON字符串，不能直接传对象，需用JSON.stringify()转换。

修复后的JS代码：

let u = "http://localhost:5000/api/clients/"  // 替换为你的实际Flask服务地址
let b = {
  "client": "n1",
  "details": {
    "address1": "Line1",
    "address2": "line2",
    "city": "city",
    "email": "@",
    "gst": "gstno"
  }
}

const addClient = async (url, clientData) => {
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(clientData),  // 序列化对象为JSON字符串
    });

    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    const data = await response.json();
    console.log("客户端添加成功:", data);
  } catch (error) {
    console.error("添加失败:", error);
  }
};

addClient(u, b);

3. CORS问题说明 #

你已经通过CORS(app)启用了全局CORS，只要服务器不抛出500异常，CORS头会正常返回。之前的CORS错误是服务器先触发500异常，导致响应中未携带CORS头，浏览器才报错。

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