JavaScript Fetch with Basic Auth

Sometimes it is necessary to use fetch from a server secured with basic auth (very often in case of staging domains), usually, the authorization is done by login and password included within the URL itself:

user:[email protected] 

JavaScript may seem pretty obvious:

const result = await fetch(`user:[email protected]/${endpoint}`, {
    method: 'POST',
    body: content,
    headers: {
        'Content-Type': 'application/json',
    },
});

But in case of fetch this is not allowed and will result in an error:

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://user:[email protected]   

To make it work, get rid of the login and password and add them to the fetch with:

const result = await fetch(`domain.com/${endpoint}`, {
    method: 'POST',
    body: content,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Basic ${btoa('user:pass')}`,
    },
});

Discover our TOP-RATED product

Explore all

Notification : PRO

Products, support and custom development using WordPress at a top-notch level

Check this extension

Notification : Custom Fields

Custom fields and Advanced Custom Fields support. Use any meta value in your notifications with simple to use merge tags.

Check this extension

Explore all extensions