Get request with Basic authorization for React js app - reactjs

Question

I try to do a get request with basic authentication using React JS. I try to do it as follows:
import React,{Component} from 'react';
import { encode } from "base-64";
export class MyDates extends Component{
constructor(props){
super(props);
this.state = {
items:[],
isLoaded:false,
}
}
componentDidMount(){
let url = 'https://gd.xxxxxx.com.tr/api/Dates';
let username = 'xxxxxxx';
let password = 'Bxxxxxxxxx';
fetch(url, {method:'GET', mode: 'no-cors', headers: {'Content-Type': 'application/json','Authorization': 'Basic ' + encode('${username}:${password}')}})
.then(res=>res.json())
.then(json => {
this.setState({
isLoaded:true,
items:json,
})
})
}
render(){
var {isLoaded,items} = this.state;
if(!isLoaded){
return<div>Loading...</div>;
}
else
{
return(
<div className='container'>
<h3>Randevularım sayfası</h3>
<div className='row'>
{items.map(item => (
//item.completed == true ?
<div className='col-md-4 px-4 py-2' key={item.MAHALLEID}>
<div className='m-2 rounded' style={{background:'#e2e2e2'}} >{item.MAHALLE}</div>
</div>
//:null
))};
</div>
</div>
)
}
}
}
Api, user and password checked.
I get the following error:
Failed to load resource: the server responded with a status of 401 ()
MyDates.js:19 Uncaught (in promise) SyntaxError: Unexpected end of input (at MyDates.js:19:1)
at MyDates.js:19:1
enter image description here

Answer 1

could you please try this. I hope this works.
componentDidMount(){
let url = 'https://gd.xxxxxx.com.tr/api/Dates';
let username = 'xxxxxxx';
let password = 'Bxxxxxxxxx';
const base64encodedData = Buffer.from(`${username}:${password}`).toString('base64');
fetch(url, {method:'GET', mode: 'no-cors', headers: {'Content-Type': 'application/json','Authorization': `Basic ${base64encodedData}`}})
.then(res=>res.json())
.then(json => {
this.setState({
isLoaded:true,
items:json,
})
})
}