FastAPI接口UI请求报422错误排查（含问号参数问题）

问题场景 #

我有一个FastAPI接口，通过Swagger页面传入文本"how are you?"时可以正常工作，对应的curl请求如下：

curl -X 'POST' \
  'https://xxxx.cloud/ai-chatbot/extract_text?q=how%20are%20you%3F' \
  -H 'accept: application/json' \
  -d ''

但使用UI端的JS代码传入同样内容时，返回422 Unprocessable Entity错误，JS代码如下：

var data = {
            "msg": msg+" d",
        }
        $.ajax({
            url: `${window.location.protocol}//${window.location.hostname}/ai-chatbot/extract_text?q=${data.msg+' d'}/1`,
            data: JSON.stringify(data),
            method: 'POST',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            
            success: function (res) {
                var res = JSON.parse(res);
                drawMessage(res)
            },
            error: function (err) {
                if (err.desc == null)
                    err.desc = "Something went wrong!"
                toastr.error(err.desc)
            }
        })

已知怀疑问题和请求末尾的问号有关，但添加空格无效，请问为何服务端正常但UI请求报错？

错误原因分析 #

1. URL路径拼接错误：JS代码里的URL末尾多了/1，导致请求路径变成/ai-chatbot/extract_text?q=xxx/1，和接口预期的路由不匹配，FastAPI无法识别该请求。
2. 查询参数处理不当：
   • 代码中data.msg已经是msg+" d"，又重复拼接了+' d'，导致查询参数内容冗余；
   • 直接将包含特殊字符（如?）的文本拼接到URL中，未做URL编码。而curl和Swagger会自动对查询参数编码（比如把?转成%3F），未编码的特殊字符会破坏URL结构，导致服务端解析参数失败。
3. 请求体与接口预期不符：从curl请求可以看出，该接口只需要查询参数q，不需要请求体，但JS代码同时发送了JSON格式的请求体，FastAPI如果没有定义接收请求体的模型，会判定请求不符合规范，返回422错误。
4. 冗余的JSON解析：dataType: "json"会让jQuery自动将响应解析为JSON对象，success回调里再执行JSON.parse(res)属于冗余操作，不过这是前端自身问题，不是422错误的直接原因。

修复方案 #

修正后的JS代码如下：

var queryText = msg + " d";
// 对查询参数进行URL编码，处理特殊字符
var encodedQuery = encodeURIComponent(queryText);
$.ajax({
    url: `${window.location.protocol}//${window.location.hostname}/ai-chatbot/extract_text?q=${encodedQuery}`,
    method: 'POST',
    dataType: "json",
    // 接口不需要请求体，移除data和contentType配置
    success: function (res) {
        drawMessage(res);
    },
    error: function (err) {
        var errDesc = err.desc || "Something went wrong!";
        toastr.error(errDesc);
    }
})

关键修复点：

• 移除URL末尾多余的/1，保证请求路径正确；
• 使用encodeURIComponent()对查询参数编码，避免特殊字符破坏URL结构；
• 去掉不必要的请求体配置，和curl请求的参数传递方式保持一致；
• 移除success回调里冗余的JSON.parse(res)。

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