Authorization Header Login

[GeorgeH]

Hi all, I'm wondering how I'd go about using the API Key Elasticsearch generates in order to use authorization header to gain access to ES.

I have a .HTML and .js file locally which contain iframes and logic to switch between the iframes to display dashboards at work. However, when using dashboards that are on Elasticsearch (using Kibana I believe), I get prompted with a login screen. I've used the login credentials to attempt to log in, only to be taken back to the login screen. I did some research (I'm new to web development) and most sources are saying about using an API Key and Authorization Header to gain access. I've got an API key from ES and the following JS code

const apiUrl = "https://example.com/";
const apiKey = "myKey";
fetch(apiUrl, {
  mode: 'no-cors',
  cache: 'no-cache',
  credentials: 'include',
  headers: {
    Authroization: `ApiKey ${apiKey}`
  },
})
.then(response => {
  if(!response.ok) {
    throw new Error('Network response was not okay...');
  }
  return response.json();
})
.then(protectedData => {
  console.log('Protected Data:', protectedData);
})
.catch(error => {
  console.error('Error: ', error);
});

Everytime I load the html page, chrome throws an error in the dev tools
GET https://example.com 401 (Unauthorized). The iframe shows the login page, but understandably, isn't logging me in.

Does anyone know of a solution for this? Any help would be gratefully appreciated!

[Artem_Shelkovnikov]

Just to make sure - if https://example.com url of your Kibana, or your Elasticsearch?

It would make sense to see a login form if you would try to send your request to Kibana. Try using Elasticsearch address for your request instead.

[GeorgeH]

Thank you for responding. I'm pretty sure it's the URL for Elasticsearch.