Nuxt3生产环境登录成功返回Blob而非JSON的问题求助

核心问题 #

执行npm run build后，生产环境登录请求的错误响应（如账号密码错误）能正常返回JSON，但成功响应时response.data却为Blob类型，而Postman/cURL测试后端返回正常JSON。

排查与解决方案 #

1. 检查响应头Content-Type #

首先在浏览器网络面板查看生产环境登录成功请求的响应头：

• 确认Content-Type是否为application/json。如果后端返回的是其他类型（如text/plain或未设置），Axios会默认将响应解析为Blob。
• 若后端响应头异常，需调整后端代码确保成功响应时返回Content-Type: application/json；若后端正常但代理转发时丢失，可修改代理文件强制设置：

// server/api/[...].ts
import { joinURL } from 'ufo';

export default defineEventHandler(async (event) => {
    const proxyUrl = useRuntimeConfig().myProxyUrl;
    const path = event.path.replace(/^\/api\//, ''); 
    const target = joinURL(proxyUrl, path);

    const response = await proxyRequest(event, target);
    // 强制设置Content-Type为JSON（按需使用）
    event.node.res.setHeader('Content-Type', 'application/json');
    return response;
});

2. 显式指定Axios请求的responseType #

虽然拦截器中设置了默认responseType: "json"，但生产环境可能存在配置覆盖，可在登录请求中显式指定：

// Pinia认证Store的authenticateUser方法
const response = await axios.post('/auth/login', index, { 
  responseType: 'json' 
});

3. 在Axios响应拦截器中手动解析Blob #

若响应确实是Blob但实际应为JSON，可在响应拦截器中添加转换逻辑：

// Axios拦截器的响应处理
axiosInstance.interceptors.response.use(
  async (response) => {
    // 判断是否为JSON类型的Blob并转换
    if (response.data instanceof Blob && response.headers['content-type']?.includes('application/json')) {
      response.data = await response.data.json();
    }
    return response;
  },
  // 错误处理部分保持不变
  async (error) => {
    // ...原有代码
  }
)

4. 检查压缩格式支持 #

生产环境若启用了gzip/deflate压缩，需确保Axios和代理能正确处理：

• 在Axios实例中添加压缩支持头：

const axiosInstance = axios.create({
  baseURL: '/api',
  withCredentials: true,
  headers: {
    'Accept-Encoding': 'gzip, deflate, br'
  }
})

• 代理中转发压缩请求头：

// server/api/[...].ts
export default defineEventHandler(async (event) => {
    const proxyUrl = useRuntimeConfig().myProxyUrl;
    const path = event.path.replace(/^\/api\//, ''); 
    const target = joinURL(proxyUrl, path);

    // 传递压缩请求头
    event.node.req.headers['accept-encoding'] = 'gzip, deflate, br';
    return proxyRequest(event, target);
});

5. 验证Nuxt生产环境配置 #

确认nuxt.config.ts中runtimeConfig的myProxyUrl在生产环境正确配置，避免代理到错误的后端地址导致响应异常。

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