React中Axios GET请求正常 PUT请求返回401未授权如何解决

核心错误为前端Axios PUT请求的参数位置传递错误，和后端鉴权、CORS配置无直接关系：

• Axios方法签名对有无请求体的方法做了区分：
  • GET/DELETE等无默认请求体的方法，签名为axios.get(url[, config])，第二个参数就是配置对象，因此将headers放在第二个参数时，GET请求可以正确携带Authorization头，鉴权通过返回200。
  • PUT/POST/PATCH等携带请求体的方法，签名为axios.put(url[, data[, config]])，第二个参数是请求体内容，第三个参数才是存放headers、超时配置的位置。当前代码将headers对象放在第二个参数，相当于Axios把{headers: {Authorization: xxx}}作为PUT请求的请求体发送，根本没有在请求头中携带鉴权令牌，后端鉴权依赖拿不到用户身份信息，直接返回401。

1. 修正前端Axios PUT请求的传参顺序
   当前更新接口未定义请求体参数，第二个参数传空对象占位，第三个参数传入headers配置即可，修正后的代码如下：

const update_todo = (id) => {
  axios
    .put(`http://127.0.0.1:8000/update_todo/${id}`, {}, {
      headers: { Authorization: `Bearer ${token}` },
    })
    .then(() => {
      getAllTodos(token);
    });
};

如果后续接口需要接收更新的待办内容，直接把要传的内容替换掉第二个参数的空对象即可。

2. 修正后端CORS配置的不规范项
   当前CORS配置存在不符合规范的问题：当allow_credentials=True时，allow_origins不允许设置为通配符*，否则浏览器会拦截跨域响应，后续涉及Cookie、鉴权头的场景会偶发异常。建议将允许源改为前端实际访问地址（本地React开发默认端口为3000，可根据实际情况调整）：

app.add_middleware(
    CORSMiddleware,
    allow_origins= ["http://localhost:3000", "http://127.0.0.1:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

修改完成后打开浏览器开发者工具的网络面板，找到对应PUT请求，检查请求头中是否存在Authorization: Bearer <你的token>字段，字段正常携带时鉴权即可通过，不会再返回401错误。

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