Laravel 8 控制器返回JSON响应经Axios请求后data为字符串且解析报错

报错Unexpected token in JSON at position 0并非Laravel返回的JSON格式本身存在问题，是两个高频踩坑点叠加导致的：

• Axios默认规则下，所有不在2xx/3xx区间的HTTP状态码，会直接触发Promise reject，根本不会走正常的响应解析流程，你拿到的根本不是Laravel返回的那串JSON内容
• 你手动对已经被Axios处理过的data做JSON.parse，触发了类型不匹配的语法错误

• 调整封装在User静态login方法里的Axios请求配置，覆盖默认的状态校验逻辑
  只要在请求配置里加入validateStatus规则，把400这类业务错误码纳入正常响应范围，就不会因为状态码直接触发reject：

  // User类静态login方法内的请求示例
  static async login(loginParams) {
    return axios.post('/api/login', loginParams, {
      validateStatus: (status) => status < 500 // 所有4xx业务状态码走正常响应流程
    })
  }
  

• 移除业务代码里手动调用的JSON.parse(response.data)逻辑
  只要响应头的Content-Type为application/json，Axios会自动把响应体解析为JS对象，不需要手动转义。手动parse的场景下，data已经是对象类型，被强制转成字符串后会变成[object Object]，直接解析就会在位置0报语法错误。
• 补充Laravel端的响应健壮性
  避免响应体被调试输出、空白字符、BOM头污染，返回JSON时显式声明响应头：

  // Laravel控制器的400状态返回优化
  return response()->json([
      'name' => 'Abigail',
      'state' => 'CA',
  ], 400, [
      'Content-Type' => 'application/json'
  ]);
  

• 补全未捕获异常的兜底逻辑
  如果不想修改全局状态校验规则，要统一在Axios响应拦截器里处理非2xx状态的响应体解析，同时在业务代码调用User.login()的位置补上.catch()分支，避免reject的异常直接抛到全局控制台：

  // Axios全局响应拦截器示例
  axios.interceptors.response.use(
    response => response,
    error => {
      // 自动解析错误响应的JSON体
      if (error.response?.data) {
        error.response.data = typeof error.response.data === 'string' 
          ? JSON.parse(error.response.data) 
          : error.response.data;
      }
      return Promise.reject(error);
    }
  )
  

• 不要误以为设置了accept: application/json请求头就会让Axios自动处理4xx状态的响应，这个头只是告诉服务端要返回JSON格式，不改变Axios对状态码的校验规则
• 不要忽略浏览器开发者工具网络面板里的实际响应内容：如果请求的响应体开头带了不可见的空白、或者Laravel调试模式输出的堆栈信息，就算配置全对也会出现解析错误，这种情况需要检查控制器是否有提前输出的内容、是否在响应前调用了dd()/var_dump()这类调试方法。

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