Axios提交带文件表单至.NET Core 6 Razor Pages返回405错误

返回405是三个配置错误叠加导致服务端无法正确匹配POST处理方法：

• 错误转换表单数据：URLSearchParams仅支持序列化字符串键值对，你把包含二进制文件的FormData传入它的构造函数，会直接丢失文件内容，同时它默认对应application/x-www-form-urlencoded编码格式，和你手动设置的multipart请求头完全冲突，服务端解析请求体失败直接拒绝请求。
• 手动硬编码multipart/form-data请求头：使用FormData上传文件时，浏览器会自动生成带boundary（请求体分段分隔符）的Content-Type头，你手动写死的头缺少这个必填的boundary参数，服务端根本无法拆分解析请求体内容，自然找不到对应的处理方法。
• （次要诱因）Razor Pages默认开启防伪造令牌校验，如果XHR请求没携带正确的__RequestVerificationToken，也会被框架拦截返回405状态码。

1. 修正Axios实例配置，删除手动写死的Content-Type头，让浏览器根据请求体类型自动生成合法请求头：

const httpClient = axios.create({
    baseURL: document.location.origin,
    headers: { 'X-Requested-With': 'XHR'}
});

2. 修正前端提交逻辑，直接传入FormData对象，不要做多余的URLSearchParams转换：

let formData = new FormData($this[0]);
// 直接提交FormData，不要转成URLSearchParams
httpClient.post($this[0].action, formData)
    .then(function (response) {
        // 自定义响应处理逻辑
    })
    .catch(function (error) {
        // 自定义错误处理逻辑
    });

补充校验：如果修改后仍返回405，检查表单内是否自动生成了__RequestVerificationToken隐藏域，没有的话在form标签内添加@Html.AntiForgeryToken()即可，Razor Pages默认的OnPostAsync方法会自动校验这个令牌。

3. 后端OnPostAsync方法无需额外修改，只要对应绑定的模型里FileField属性是IFormFile类型，就能正常接收到上传的文件。

修改后抓包查看请求特征：

• 请求头的Content-Type自动携带随机生成的boundary参数，格式类似multipart/form-data; boundary=----WebKitFormBoundaryXxXxXx
• 请求体中可以看到文本字段、上传文件的分段内容，无文件丢失
• 请求可以正常命中后端OnPostAsync方法，不再返回405错误

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