Nuxt 3应用获取OIDC Access Token遇请求错误问题排查

问题核心 #

你遇到的400错误是因为OIDC密码模式（password grant_type）要求请求体必须用application/x-www-form-urlencoded表单格式提交，而非JSON格式。你的请求用了JSON，IDP无法解析其中的参数，所以提示缺失grant_type。

1. 修复SSR API代码（server/api/token.js） #

将请求格式改为表单编码，替换原有的JSON配置：

export default defineEventHandler(async (event) => {
  try {
    // 构建表单参数
    const formData = new URLSearchParams();
    formData.append('client_id', '****');
    formData.append('client_secret', '****');
    formData.append('grant_type', 'password');
    formData.append('username', '****');
    formData.append('password', '****');

    const response = await fetch('https://.../token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded', // 替换为表单编码头
      },
      body: formData.toString() // 转换为表单字符串
    });

    // 解析IDP返回的令牌数据
    const tokenData = await response.json();
    return tokenData;
  
  } catch (error) {
    console.error('令牌获取失败:', error);
    sendError(event, createError({
      statusCode: 500,
      statusMessage: '内部服务器错误',
      data: {
        error: error.message,
        stack: error.stack,
      }
    }));
  }
});

2. 简化前端页面代码（可选） #

Nuxt3的$fetch会自动解析JSON响应，无需手动调用response.json()：

<template>
  <h1>Home Page</h1>
  <div>
    <button @click="getToken">获取令牌</button>
    <p>{{ token }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const token = ref(null);

const getToken = async () => {
  try {
    token.value = await $fetch('/api/token');
  } catch (error) {
    console.error('获取令牌出错:', error);
  }
};
</script>

补充说明 #

• 最初的fetch failed错误大概率也是请求格式不匹配导致的，改成表单格式后应该能一并解决。
• OIDC密码模式属于遗留认证方式，仅建议在完全信任的内部系统中使用，生产环境优先选择授权码模式（authorization code grant）。

内容的提问来源于stack exchange，提问作者Wasabi-sudo