从 Nuxt 3 应用程序检索 oidc 访问令牌

Question

我尝试从我的 Nuxt 3 新应用程序中的 idp 检索一个简单的令牌。 为此，我创建了一个 vue 页面，调用我的 ssr api 来获取令牌。 但当我致电 idp 时，我得到了

fetch failed

回复。

我的邮递员工作得很好，但我不知道为什么这里不起作用。

我是 nuxt 和 oidc 世界的新手。我肯定没有做正确的事情，但我不知道是什么...也许是获取方法或者我在标头/正文请求中遗漏了某些内容？

已编辑

这是我的查看页面：

<h1>Home Page</h1>

  <div>
    <button @click="getToken">Get Token</button>
    <p>{{ token }}</p>
  </div>
</template>

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

const token = ref(null);

const getToken = async () => {
  try {
    const response = await $fetch('/api/token');
    const data = await response.json();
    token.value = data;
  } catch (error) {
    console.error('Error fetching token:', error);
  }
};
</script>

这是我的 SSR api (server/api/token.js) :

export default defineEventHandler(async (event) => {

  try {
    const token  = await fetch (
        `https://.../token`,
        { 
            headers: {
            'Content-Type': 'application/json',
            } ,
            method : 'POST', 
            body : JSON.stringify({
                'client_id': "****",
                'client_secret': "****",
                'grant_type': "password",
                'username': "****",
                'password': "****",
            })
        }
      );

    return token;
  
  } catch (error) {

      console.log(error);
    sendError(event, createError({
      statusCode: 500,
      statusMessage: 'Internal Server Error: ',
      data: {
          error: error.message,
          stack: error.stack,
      }
    }));
  }

})

我现在有一个

Missing form parameter: grant_type

Error 400 : 
{
    "error": "invalid_request",
    "error_description": "Missing form parameter: grant_type"
}

正文内容：

{"client_id":"****","client_secret":"****","grant_type":"password","username":"****","password":"****"}

Answer 1

我最终使用 URLSearchParams 获取令牌并再次设置

application/x-www-form-urlencoded

，而不是使用 JSON.stringify 和

application/json

。 我不明白为什么使用 application/json 我得到一个

Invalid request : Missing form parameter: grant_type

我在正文中正确设置了。

这是我检索令牌的最终代码：

export default defineEventHandler(async (event) => {
  try {
    const token  = await fetch(`https://****/realms/test/protocol/openid-connect/token`,
      { 
        method : 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          'client_id': "****",
          'client_secret': "****",
          'grant_type': "password",
          'username': "****",
          'password': "****"
        })
      });

    return token;
  } catch (error) {
    sendError(event, createError({
      statusCode: 500,
      statusMessage: 'Internal Server Error: ',
      data: {
          error: error.message,
          stack: error.stack,
      }
    }));
  }

})

感谢@C3roe帮助我理解我的问题。