使用JavaScript向Web API发送POST请求返回401错误的问题排查求助

Hey there! Let's break down your 401 error and fix that API request step by step.

A 401 "Unauthorized" response means the API doesn't recognize you as a valid, authorized user. This is almost always related to missing or incorrect authentication credentials, but we also need to make sure your request body matches what the API expects.

Looking at your code, your headers only include Content-Type: application/json—most partner APIs require an authentication token or API key to let you submit data.

For example, if the API uses Bearer tokens, you'd add this to your headers:

headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_PARTNER_API_TOKEN" // Replace with your actual token
},

Or if it uses an API key header (common for partner integrations):

headers: {
    "Content-Type": "application/json",
    "X-Partner-API-Key": "YOUR_API_KEY" // Check the API docs for the exact header name
},

You'll need to find this authentication detail in the Njuko partner API documentation—this is likely the root cause of your 401 error.

Your current request is missing several fields that the API example shows are required (or at least expected):

• methodName: The payment method label (e.g., "Partner payment (VISA)" from the example)
• datas: An array of custom field values (each with value and a field ID)
• metaData: Optional or required metadata (like the Strava activity ID in the example)

Here's an updated version of your fetch call with these fields included (fill in the placeholders with your actual data):

fetch("https://front-api.njuko.com/partner/registration", {
    method: "POST",
    body: JSON.stringify({
        edition: edition,
        competition: competition,
        price: price,
        firstname: firstname,
        lastname: lastname,
        email: email,
        // Add missing required fields from the API example
        methodName: "Partner payment (VISA)", // Adjust based on your payment method
        datas: [
            {
                value: "Your address or required custom value", // Replace with actual input
                field: "REPLACE_WITH_THE_CORRECT_FIELD_ID" // Get this from API docs or your form setup
            }
        ],
        metaData: [
            {
                key: "stravaActivityId",
                label: "strava-activity-id",
                value: "YOUR_STRAVA_ID_IF_REQUIRED" // Omit this if it's optional
            }
        ]
    }),
    headers: {
        "Content-Type": "application/json",
        // Add your authentication header here
        "Authorization": "Bearer YOUR_PARTNER_TOKEN"
    },
})
.then(function (response) {
    // Add error checking to get more details from the API
    if (!response.ok) {
        console.log("Response status:", response.status);
        return response.text().then(errorText => { throw new Error(errorText) });
    }
    return response.json();
})
.then(function (data) {
    console.log("Success!", data);
})
.catch(function (error) {
    console.error("Request failed:", error);
});

• Verify ID values: The edition, competition, price, and field IDs in the example are MongoDB-style 24-character strings. Make sure your form inputs are passing these actual IDs (not just the human-readable names like "2024 Summer Edition").
• Check API error details: The updated catch block will log raw error text from the API—this often tells you exactly what's missing (e.g., "Missing authentication token" or "Required field 'methodName' not provided").
• Double-check the docs: Always refer back to the official Njuko partner API docs for exact authentication requirements and field specifications—this is the most reliable source of information.

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