React前端调用Devise登录接口报ActionController::UnknownFormat错误如何解决

1. 登录请求未提前设置请求头 #

你当前是登录请求成功后才调用setAuthHeaders()，导致发起登录请求时没有带上正确的Accept、Content-Type头，Rails无法识别请求需要返回JSON格式，直接触发UnknownFormat异常。同时你提交的参数外层结构和控制器要求不匹配，也会导致参数解析失败。

• 修复方式：调整handleLogin逻辑，先发请求前设置头，修改参数外层标识：

const handleLogin = async (event) => {
  event.preventDefault()
  setLoading(true)
  try {
    // 先设置请求头再发登录请求
    setAuthHeaders()
    const res = await authApi.login({
       // 参数外层要和控制器user_params要求的:user对应，不要用login
       user: {
         email,
         password
        }
      });
    setLoading(false)
    setCurrentUser(res)
    setLoggedIn(true)
    console.log(res.data)
    window.location.href = "/";
  } catch {
    setLoading(false)
  }
}

2. Accept头拼写错误 #

你在setAuthHeaders方法里把application/json拼写成了applicaion/json，少了字母t，导致Rails无法识别JSON格式请求。

• 修复方式：修正拼写：

export const setAuthHeaders = (setLoading = () => null) => {
  axios.defaults.headers = {
    Accept: "application/json", // 修正拼写错误
    "Content-Type": "application/json",
    "X-CSRF-TOKEN": document
      .querySelector('[name="csrf-token"]')
      .getAttribute("content"),
  };
  // 后续原有逻辑不变
}

3. 路由未指定自定义会话控制器 #

如果没有在路由文件里指定Devise使用你自定义的SessionsController，会默认调用Devise原生的会话控制器，原生控制器默认仅响应HTML格式，也会触发UnknownFormat异常。

• 修复方式：修改config/routes.rb的Devise配置：

devise_for :users, controllers: {
  sessions: 'sessions'
}

4. 可选兜底配置 #

可以在自定义SessionsController显式指定响应格式，避免格式识别异常：

class SessionsController < Devise::SessionsController    
  # 显式指定该控制器仅响应json格式
  respond_to :json
  # 后续原有逻辑不变
end

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