Axios调用邮箱验证API遇Unauthorized错误：Bearer Token授权失败求助

可能的问题点及修复步骤 #

1. 无效的跨域Header设置 #

前端请求里添加Access-Control-Allow-Origin: *完全没用，这个Header是服务器端用来响应跨域请求的，前端发送该Header反而可能干扰接口验证，直接删除这个配置项。

2. 请求Header缺失Content-Type #

调用邮箱验证接口时，你的access配置只携带了Authorization，但多数接口要求必须传Content-Type: application/json才能正确解析请求体，甚至会以此作为授权验证的前提，需要把这个Header补充进去。

3. 缺少验证接口的错误捕获逻辑 #

当前验证接口的请求没有catch块，无法看到具体错误详情（比如token格式错误、token已过期、接口要求的Header缺失等），必须加上错误捕获才能精准排查问题。

4. Async/Await与.then混用导致逻辑混乱 #

代码同时使用await和.then，不仅可读性差，还可能隐藏异步执行的潜在问题，建议统一使用async/await语法。

5. 确认Token字段的正确性 #

先在控制台打印response.data，确认access_token字段确实存在、格式正确（比如是否符合Bearer Token要求的格式，有没有多余空格或特殊字符）。

修改后的完整代码 #

const config = {
  headers: {
    'content-type': 'application/json',
    // 移除无效的Access-Control-Allow-Origin配置
  },
};

const reqBody = {
  formBody: {
    email: emailInput,
    password: passwordInput,
    username: userNameInput,
  },
  reqEmail: {
    channel: 'email',
    channel_value: emailInput,
  },
};

async function submitFormHandler(event: any) {
  event.preventDefault();
  
  try {
    // 调用注册接口
    const registerRes = await axios.post(
      `https://website.com/access/v1/user/register?platform=web`,
      reqBody.formBody,
      config
    );

    console.log(registerRes.data);
    if (registerRes.data.code === 201) {
      const accessToken: string = registerRes.data.access_token;
      // 验证接口的Header同时包含Content-Type和Authorization
      const verifyConfig = {
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
      };
      
      try {
        // 调用邮箱验证接口
        const verifyRes = await axios.post(
          `https://website.com/access/v1/account/request-verification?platform=web`,
          reqBody.reqEmail,
          verifyConfig
        );
        console.log('A Link has been sent to you.', verifyRes.data);
      } catch (verifyError) {
        // 捕获验证接口的错误并打印详细信息
        console.error('邮箱验证请求失败:', verifyError.response?.data || verifyError.message);
      }
    }
  } catch (registerError) {
    console.error('注册请求失败:', registerError.response?.data || registerError.message);
  }
}

额外排查步骤 #

• 打开浏览器开发者工具的Network标签，查看验证接口的请求Header，确认Authorization字段是否正确携带，格式是否为Bearer xxxxxx（注意Bearer后面必须有一个空格）。
• 如果仍报错，查看接口返回的具体错误描述（比如error字段内容），多数接口会明确说明未授权的原因，比如token无效、权限不足等。

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