无法通过Playwright-JavaScript生成Basic Auth的API访问令牌（返回401）

问题描述 #

无法通过Playwright-JavaScript生成带Basic Auth的API端点访问令牌，请求返回401状态码，但在Postman中相同参数的请求可正常返回200。

Postman 请求详情 #

TokenEndPoint - https://api.dev.aa.com//token
Authorization: username: 'fadsfadf353423',
               password: 'ZurbhG3kjZ'
Body: grant_type: 'client_credentials'

CURL 请求详情 #

curl --location --request POST 'https://api.dev.aa.com/edgemicro-auth/token' \
--header 'Authorization: Basic UkdZZUxSVUpobk5iRkR1QXJ4dzBnV1JNYXY3QmRxS==' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--header 'Cookie: _abck=D615B497E043C6F7E72E5F9AB4A34B5E~-1~YAAQDPs7FyzSrg+HAQAAwuC2NwmgIuawZv+zP3GhCafLPgqXpwKMPc9pjZ1IQ1kkIaWLFigGwzSfbIV6Y0cA/octAN264XvJR7IQHlVWNKSW64iR3bKb/4cTCCoKtNVyX3V7O+ekwHo/MhiK2Ie3vzGIw5qXpeqX7VQLSshZ4Tn+YvWCoARgFpSh0H6WhJQqPoKlvl3JJkMogFubx6csEfoHvShZaOdi2E0ddNxQOV2bmSnBtHuN5ntsIskySSqI1NvdXquXIZxyq+ghkDxgCWHaW9uFdLsZChBHZb7MhwSEfXvAeuBC4gSEhg5T8dHltZpYR+DvJQlZPdGh2fccOE8jb07ypbEU+FK5djoEk0qZJypQ6mJyGKqwYnBw6XvdRbBl~-1~-1~1675889701' \
--data-urlencode 'grant_type=client_credentials'

尝试的Playwright代码 #

import { expect, request, test } from "@playwright/test";
const apiUrlEndPoint = 'https://api.dev.aa.com/token'
test('authendPoin', async ({request}) => {
    const response = await request.post(apiUrlEndPoint, {
        headers: {
            //grant_type: 'client_credentials',
            grant_type: 'password',
            username: 'RGYeLRUJhnNbFDuArxw0gWRMav7BdqJu',
            password: 'ZurbhG3kjZviG4xV'
          }
        //data:processRefundBodyPayload
        //data: JSON.stringify(postBody),
    })
    expect(response.ok()).toBeTruthy
    console.log("===================Status Text==============")
    console.log(response.statusText())
    expect(response.status()).toBe(200)
})

问题排查与修正方案 #

核心问题点 #

1. 接口地址不匹配：
   Postman和CURL的接口路径是/edgemicro-auth/token，但Playwright代码里用的是/token，缺少了关键路径段，导致请求到错误的端点。

2. Basic Auth处理错误：
   Basic Auth的规范是将用户名:密码拼接成字符串后进行Base64编码，然后放在Authorization: Basic <编码值>的Header中。你当前直接把username和password作为Header字段传递，完全不符合认证要求。

3. 请求参数位置错误：
   grant_type应该作为application/x-www-form-urlencoded类型的请求体参数，而不是放在Header里；同时你错误地将grant_type设置为password，和Postman中使用的client_credentials不一致。

修正后的Playwright代码 #

import { expect, test } from "@playwright/test";

// 修正接口地址，与Postman/CURL保持一致
const apiUrlEndPoint = 'https://api.dev.aa.com/edgemicro-auth/token';

test('authendPoin', async ({ request }) => {
    // 生成Basic Auth所需的Base64编码令牌
    const username = 'RGYeLRUJhnNbFDuArxw0gWRMav7BdqJu';
    const password = 'ZurbhG3kjZviG4xV';
    const basicAuthToken = Buffer.from(`${username}:${password}`).toString('base64');

    const response = await request.post(apiUrlEndPoint, {
        headers: {
            'Authorization': `Basic ${basicAuthToken}`,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 正确设置请求体参数
        form: {
            grant_type: 'client_credentials'
        }
    });

    console.log("===================Status Text==============");
    console.log(response.statusText());
    expect(response.ok()).toBeTruthy();
    expect(response.status()).toBe(200);
});

额外注意事项 #

• 核对用户名和密码是否与Postman中使用的完全一致（你Playwright代码中的密码比Postman示例多了viG4xV，需确认正确性）。
• 如果接口依赖CURL中的Cookie才能正常响应，可以在请求Headers中添加对应的Cookie字段。

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