Incorpora l'app angularjs in un'altra app angularjs

Question

Sto cercando di incorporare grafana nella mia app angularjs. Posso farlo facilmente con un semplice iframe, ma la mia app usa jwt per l'autenticazione e non riesco a trovare un modo per impostare un'intestazione per un iframe. Ho confermato che funziona perfettamente quando spengo l'autenticazione con l'iframe di base, ma ne ho bisogno per l'utilizzo in produzione.

Ho anche provato a utilizzare $http per ottenere il grafana html (in questo modo posso impostare il mio header jwt) ma il js non sembra funzionare con questo metodo. Presumo che sia correlato al bootstraping dato che eseguono il bootstrap manualmente.

//iframe 
<iframe id="grafana" layout-fill flex></iframe> 

//controller 
    $http.get('/grafana/dashboard').then(function(response) { 
     var iframeDocument = document.getElementById('grafana').contentWindow.document 
     iframeDocument.open('text/html', 'replace') 
     iframeDocument.write(response.data) 
     iframeDocument.close() 
    }) 

C'è un altro modo per impostare un'intestazione su un iframe? Ho anche provato ad usare l'html di grafana come modello, ma come ho detto prima il loro bootstrap sembra non funzionare all'interno di un'altra app.

Answer 1

È cantry in questo modo, dovrebbe funzionare:

$.ajax({ 
    type: "GET", 
    url: "/grafana/dashboard", 
    contentType: "application/json", 
    beforeSend: function(xhr, settings){ 
      xhr.setRequestHeader("some_custom_header", "foo");}, 
    success: function(data){ 
     $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data)) 
    } 
});