Vue中使用Fetch发送PATCH请求遇404错误，求排查原因

问题 #

我希望通过fetch更新部分数据，相关代码如下：

methods: {
    updateEmails() {
      fetch("http://localhost:3000/selectedMailAccounts", {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(["info@email.com", "email@email.com"]),
      });
    },
  },

调用该函数时，控制台出现如下错误：

PATCH http://localhost:3000/selectedMailAccounts 404 (Not Found)

但在浏览器中打开该URL可以看到对应数据（如下所示），说明资源存在：

[
  "company@email.com",
  "info@gmail.com",
]

请问这一问题的原因是什么？

原因分析 #

• 后端未配置PATCH请求的路由：浏览器访问URL用的是GET请求，后端仅配置了该路径的GET请求处理逻辑，没有注册PATCH请求的路由，导致PATCH请求返回404。
• HTTP方法与路由严格绑定：多数后端框架会把HTTP方法和路径作为路由的唯一标识，即使路径完全相同，不同方法对应不同的路由规则。GET能访问资源，不代表后端支持该路径的PATCH请求。
• 请求格式不符合后端要求：如果后端对PATCH请求的请求体格式、参数有特定要求，当前请求的body结构不符合预期，也可能被后端判定为无效请求返回404，但这种情况优先级低于前两者，建议先排查路由配置。

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