Vue.js+Axios调用AWS Cognito Token端点POST API传参异常排查

我太懂你这种“Postman能跑、代码不行”的崩溃感了！核心问题确实是你怀疑的那样——AWS Cognito的Token端点只认application/x-www-form-urlencoded格式的请求，而Vue里如果直接传JSON对象，默认会用application/json的请求头，这就导致后端完全解析不了你的请求体。

下面给你一步步搞定这个问题：

1. 先把请求头掰正 #

调用Token端点时，必须显式把Content-Type设为application/x-www-form-urlencoded。如果你的http-common.js里全局配置了JSON头，记得在这个请求里直接覆盖它。

2. 把请求体转成URL编码格式 #

不能直接传JSON对象，得把参数转换成键值对拼接的URL编码字符串，这里有两种简单方法：

方法一：用浏览器原生的URLSearchParams #

不用额外装包，浏览器自带这个API：

import HTTP from './http-common';

async function fetchCognitoToken(code) {
  try {
    const params = new URLSearchParams();
    params.append('grant_type', 'authorization_code'); // 按你的授权类型调整，比如也可能是refresh_token
    params.append('client_id', '你的Cognito客户端ID');
    params.append('code', code); // 你从登录端点拿到的code
    params.append('redirect_uri', '你的回调地址'); // 必须和授权请求里的地址完全一致

    const response = await HTTP.post('/oauth2/token', params, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });

    console.log('Token到手！', response.data);
    return response.data;
  } catch (err) {
    console.error('Token获取失败:', err);
    throw err;
  }
}

方法二：用qs库（更灵活） #

如果你的项目已经装了qs（很多Vue项目都会用到），用它序列化参数更顺手：
先确保装了依赖：

npm install qs --save

然后在代码里这么写：

import HTTP from './http-common';
import qs from 'qs';

async function fetchCognitoToken(code) {
  try {
    const requestData = {
      grant_type: 'authorization_code',
      client_id: '你的Cognito客户端ID',
      code: code,
      redirect_uri: '你的回调地址'
    };

    const response = await HTTP.post('/oauth2/token', qs.stringify(requestData), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });

    console.log('Token到手！', response.data);
    return response.data;
  } catch (err) {
    console.error('Token获取失败:', err);
    throw err;
  }
}

3. 排查http-common.js的坑 #

如果还是不行，去检查你的http-common.js有没有全局请求拦截器——比如自动给所有请求加Content-Type: application/json，这会覆盖你单个请求的设置。可以临时在这个请求里禁用拦截，或者调整拦截器逻辑：

// 比如在请求配置里加transformRequest，强制转换参数格式
const response = await HTTP.post('/oauth2/token', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
    // 确保不管传入什么，都转成URL编码格式
    return data instanceof URLSearchParams ? data : qs.stringify(data);
  }]
});

按照上面的步骤调整后，你的请求就和Postman里的完全一致了，肯定能成功拿到Cognito的Token！

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