I have an nginx reverse proxy for an application with HTTP Basic Auth set up. In my frontend web app, the authentication works with axios ( status code 200 ), but after setting the iframe source the browser window asks for the credentials again. Why is that happening when Im already authenticated ?

Here is my Vue component.

<template>
  <div>
    <v-container>
      <iframe
        v-if="authenticated"
        :src="grafana_url"
        width="450"
        height="200"
        frameborder="0"
      ></iframe>
    </v-container>
  </div>
</template>

import axios from 'axios';
export default {
  data() {
    return {
      authenticated: false,
      grafana_url: '',
    };
  },
  async created() {
    var self = this;
    var config = {
      method: 'GET',
      url: 'https://grafana.webapp.com',
      auth: {
        username: 'user',
        password: '123456',
      },
    };
    await axios(config)
      .then(function (response) {
        console.log(response.status);
        self.grafana_url =
          'https://grafana.webapp.com/d-solo/panelId=2';
        self.authenticated = true;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};