$ window.open에 인증 헤더를 추가하는 방법

$ window.open에 인증 헤더를 추가하는 방법

사용자가 데이터베이스에 저장된 데이터를 입력한 후 서버측에서 pdf 파일로 컴파일하는 angularjs 어플리케이션이 있습니다.모든 액세스에는 적절한 인증 헤더가 있어야 합니다.필요한 데이터를 채운 후 사용자가 버튼을 눌러 데이터를 저장한 다음 pdf 파일을 검색합니다.최적으로, 나는 전화합니다.$window.open(url_generating_pdfangularjs 앱에서.잘 작동하여 다른 창에서 열리지만 인증 헤더를 추가하는 방법$window요청?제가 알기로는 pdf를 다운받을 수 없고 ajax로 출력할 수 없기 때문에 이 인증을 놓쳤습니다.아니면 서버에서 url을 호출하여 다른 창에서 파일을 열 수 있는 다른 방법이 있을까요?

저는 이 오래된 질문을 정확하고 안전한 답변으로 업데이트해야 한다고 생각합니다.

window.open에서 수행하는 HTTP GET 요청에는 헤더를 추가할 수 없습니다.

인증 요청을 하는 안전한 방법은 인증 토큰을 요청 헤더에 설정하고, 이전 답변에서 제안했듯이 URL에 노출되지 않는 것입니다(그 이후로 몇 가지를 배웠습니다).

Angular를 사용하여 인증된 서버에서 PDF(또는 기타 이진 데이터)를 다운로드하려면 다음과 같이 하십시오.JS 당신은 다음을 수행해야 합니다.

1. 헤더에 있는 인증 토큰을 전송하는 리소스에 HTTP GET 요청을 하고 responseType을 이진 데이터 형식(예: blob 또는 arraybuffer)으로 설정합니다.
2. 브라우저에서 "다른 이름으로 저장" 대화상자를 사용하여 파일에 있는 이진 데이터를 다운로드합니다. 일반적으로 이진 데이터에 대한 다운로드 링크를 만든 후 클릭합니다.

이 답변이 이 질문에 대한 의구심을 해소하고 인증된 REST API에서 리소스를 안전하게 다운로드 할 수 있는 방법을 제공하기를 바랍니다.

이 인증 파라미터를 URL에 추가하고 서버 쪽에서 GET를 하면 될 것 같습니다.

//Add authentication headers as params
var params = {
    access_token: 'An access_token',
    other_header: 'other_header'
};

//Add authentication headers in URL
var url = [url_generating_pdf, $.param(params)].join('?');

//Open window
window.open(url);

헤더와 responseType의 토큰으로 보안된 api를 호출하여 다음과 같은 방법으로 응답을 blob하고 파싱할 수 있으며 브라우저에서 크롬과 파이어폭스에 대한 pdf를 볼 수 있기를 바랍니다.

var ieEDGE = navigator.userAgent.match(/Edge/g);
        var ie = navigator.userAgent.match(/.NET/g); // IE 11+
        var oldIE = navigator.userAgent.match(/MSIE/g);

        var blob = new window.Blob([response], { type: 'application/pdf' });

        if (ie || oldIE || ieEDGE) {
          window.navigator.msSaveBlob(blob, fileName);
        }
        else {
          var fileURL = URL.createObjectURL(blob);
          window.open(fileURL);
        }

언급URL : https://stackoverflow.com/questions/23138671/how-to-add-authentication-header-to-window-open