fbpx
Search
Close this search box.

Home / Blog

 / 
JavaScript Fetch with Basic Auth

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')}`,
    },
});

Share This Article:

Picture of Kuba Mikita

Kuba Mikita

Share This Article:

Summary

Picture of Kuba Mikita

Kuba Mikita

Share This Article:

Latest updates, discounts and more!

Get the most recent updates on WordPress automation, fresh plugins, new features and price cuts.

Related articles

BracketSpace Black Friday is here, we’re making it a celebration with two full weeks of unbeatable discounts on our top WordPress plugins. If you’ve been waiting for the right moment...

The Notification plugin just received its third major update, with a complete code refactor to enhance performance and user experience. This rewrite brings improved functionality, so if you’re a Notification...

Logging in as an administrator, the easy way with a short snippet. Site files access required....

WordPress Plugins that get the job done

With years of experience creating client websites, we bring our experience to functional WordPress plugins.

Easy to use for everyone

Regardless of experience level, you can easily use our products.

Top-notch Support included

We treat our clients seriously and focus heavily on support. Reviews backs this up!

Extensible and developer friendly

You're the same developer as we are. Our code is clean and extensible, just the way you like.