JavaScript发起POST请求报访问控制错误及405状态码问题求助

HTTP 405状态码全称是Method Not Allowed，代表目标服务器的/newCheckout接口当前拒绝使用POST方法的请求，常见触发原因如下：

• 服务端接口配置变更：即使前端代码无修改，服务端运营方可能调整了该接口的允许请求方法，例如改为仅支持GET、PUT方法，或临时下线了POST方法的支持
• 跨域预检规则变更：当POST请求携带JSON格式的请求体时，浏览器会自动先发送OPTIONS预检请求校验跨域权限，如果服务端CORS配置中移除了POST方法的允许规则，也会返回405错误
• 服务端路由匹配异常：服务端路由规则更新后，/newCheckout路径可能仅绑定了其他请求方法的处理逻辑，POST请求无法匹配到对应的处理函数

前端排查调整 #

1. 首先确认接口支持的请求方法：可通过Postman、curl等工具向该接口发送OPTIONS请求，查看返回头的Allow字段，明确接口当前支持的请求方法，如果接口已不再支持POST，直接修改fetch配置的method参数为对应允许的方法即可
2. 补充缺失的请求头配置：你当前发送的是JSON格式请求体，需要显式声明Content-Type，避免服务端无法识别请求格式导致误拦截，调整后的代码如下：

let data = {"checkout_id": document.documentElement.innerHTML};

fetch("https://botach-test-branch.ngrok.io/newCheckout", {
  method: "POST", 
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
}).then(res => {
  console.log("Request complete! response:", res);
});

服务端调整 #

如果前端调整后仍返回405错误，需要服务端侧做对应配置修复：

• 检查/newCheckout接口的请求方法限制，重新开启POST方法支持
• 修正CORS配置，在OPTIONS请求的返回头Access-Control-Allow-Methods中添加POST
• 核对服务端路由规则，确保POST请求到/newCheckout可正常匹配到对应的处理逻辑

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