API AUTH failing only in browser

Hello,

I’m trying to add a separate page on my multi-vendor website in order to make possible to vendors to only see their pending orders. Using fetch, this will keep updated the page on every new order.

The problem is that WCFM REST API is working without problems into Postman but, when the same request comes from the browser, then I receive the 401.

Here is the JS Fetch version that Postman automatically creates when clicking on “code” (this works inside Postman):

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", "Basic <em>ENCODED_USER_PASSWD</em>");

var urlencoded = new URLSearchParams();

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("https://my-website.it/wp-json/wcfmmp/v1/orders/", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Trying to use that as it is inside a clean html page generate a 401.
Then i tried to use different syntax for this fetch inside the html page but it gives me 401. Here is the code:

<div id="orders" class="container"></div>

<script>
let woousername = '<em>USERNAME</em>';
let woopassword = '<em>PASSWD</em>';
var wooencodedData = window.btoa(woousername + ":" + woopassword);
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', 'Basic ' + wooencodedData);

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

async function gigi() {
fetch("https://my-website.it/wp-json/wcfmmp/v1/orders/", requestOptions)
  .then(response => response.json())
        .then((data) =>  {return data})
        .then((data) => {
                 var x = "";
                for (i in data) {
                 if (data[i].status == "processing") {
                 x += '<div class="order-list">' + '<p class="col-md-4">' + data[i].id + " " + data[i].status + "</p>" + '<a style="" href="https://my-website.it/dashboard/orderslist/" target="popup">Vai agli ordini</a>' + " " + '</div>';
                document.getElementById("orders").innerHTML = x;
                console.log(data[i].date_created);
                }}
            })
};

setInterval(gigi, 2000);
</script>

I’m using WP Basic Auth and everything is working fine only if the requests comes from Postman. Tried to host this HTML page inside WordPress and outside.

Is there something I could do?

Thank you,
Marco.

PS: WooCommerce API works good with browser and postman but I need WCFM REST API.

• This topic was modified 3 years, 7 months ago by trianglestream.