Nuxt.js SPA项目登录接口返回HTML而非JSON及Cookie失效求助

一、接口返回HTML而非JSON的排查 #

• 核对接口地址准确性：确认请求URL无拼写错误、环境（开发/生产）地址未混淆。比如是否误将前端路由当作接口地址，或域名写错导致请求落到前端首页/404页面，返回HTML内容。
• 检查响应状态码：打开浏览器DevTools的Network面板，查看登录请求的状态码。若为3xx重定向，大概率是接口做了权限跳转，将请求导向了登录页面（HTML）；若为4xx/5xx，可能是服务端出错后返回了错误页面而非JSON。
• 验证请求头是否生效：即便设置了Accept: application/json，也要在Network面板的Request Headers里确认该字段确实存在且值正确。如果是POST请求，还要检查Content-Type是否为application/json——若服务端仅接受JSON格式，而你发送的是表单格式，也可能返回错误页面。
• 绕过前端直接调用接口：用浏览器地址栏或Postman直接调用登录接口，观察返回结果。如果仍返回HTML，问题出在服务端；若返回正常JSON，则问题在前端请求配置。

二、Cookie未保存的排查 #

• 确认跨域场景下的CORS配置：前后端不同域名时，后端必须配置：
  • Access-Control-Allow-Origin设为前端具体域名（不能是*，否则credentials: 'include'无效）
  • Access-Control-Allow-Credentials: true
• 检查Cookie属性：后端返回的Cookie若带有Secure（仅HTTPS环境生效，本地HTTP下无法保存）、SameSite: Strict（跨域请求不会携带）属性，或HttpOnly（前端无法读取但不影响请求携带），都会导致Cookie无法正常保存。可在Network面板的Response Headers里查看Set-Cookie字段的具体属性。
• 确认请求的credentials配置：如果用Nuxt的$axios，要确保配置生效：
  在nuxt.config.js中全局配置：

  axios: {
    credentials: true
  }
  

  或单个请求中明确设置：

  this.$axios.post('/api/login', data, {
    withCredentials: true
  })
  

• 检查浏览器隐私设置：若浏览器开启“阻止第三方Cookie”，跨域场景下Cookie无法保存，可临时关闭该设置测试。

三、额外排查点 #

• Nuxt代理配置校验：如果用了代理转发接口，确认nuxt.config.js中的代理配置正确，比如：

  proxy: {
    '/api': {
      target: 'http://your-backend-domain',
      pathRewrite: { '^/api': '' }
    }
  }
  

  确保/api/login能正确转发到后端的/login接口，而非落到前端路由。
• 服务端路由匹配规则：部分后端框架若路由配置顺序错误，会把接口请求匹配到静态页面路由，返回HTML。比如Express中静态文件路由放在接口路由前，可能导致接口请求被当作静态文件处理。

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