JavaScript - Как установить заголовок запроса для браузера GET - PullRequest
Новая
       24

JavaScript - Как установить заголовок запроса для браузера GET

14 голосов
/ 14 декабря 2011

Если мы сделаем window.location = "http://MyApi.com/Pdf";, браузер выполнит GET URL http://MyApi.com/Pdf. Но если мы хотим установить заголовок authentication запроса перед выполнением GET URL, потому что сервер является сервером REST и не поддерживает куки. Как это сделать?

Во всех случаях я использую $.ajax для вызова службы, но на этот раз мне нужно показать ответ в новом окне. Ответ - это файл в формате PDF.

Заранее спасибо.

Ответы [ 5 ]

9 голосов
/ 25 февраля 2016

В более поздних браузерах вы можете использовать BLOB-объекты: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="tryit();">PDF</button>
<script>
    function tryit() {
        var win = window.open('_blank');
        downloadFile('/pdf', function(blob) {
            var url = URL.createObjectURL(blob);
            win.location = url;
        });
    }
    function downloadFile(url, success) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
        xhr.responseType = "blob";
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (success) success(xhr.response);
            }
        };
        xhr.send(null);
    }

</script>
</body>
</html>

В IE спросите пользователя: 

window.navigator.msSaveOrOpenBlob(blob, 'readme.pdf');

PS Вы можете протестировать бэкэнд в Node:

router.get('/pdf', function(req, res) {
  if(req.headers.authorization !== 'Basic dXNlcm5hbWU6cGFzc3dvcmQ=') return res.status(403).send('Not allowed');
  res.sendFile(path.join(__dirname, 'public', 'render.pdf'));
});
router.get('/', function(req, res) {
  res.render('index');
});
2 голосов
/ 09 июля 2014

Я думаю, это то, что вы ищете ... Или поправьте меня, если я ошибаюсь.

https://developer.mozilla.org/en/docs/Setting_HTTP_request_headers

1 голос
/ 14 декабря 2011

Если вы не хотите скрывать или скрывать учетные данные пользователя, просто используйте простую аутентификацию GET: используйте http://username:password@MyApi.com/ вместо http://MyApi.com/

1 голос
/ 14 декабря 2011

Должен ли это быть GET?

Причина, по которой я спрашиваю, состоит в том, что вы можете просто иметь форму POST (для target = "_ BLANK"), которая публикует что угодно, но показывает встроенный файл вновое окно.Конечно, это не решит проблему с вашими пользовательскими заголовками, но тогда, так как вы также можете POST использовать jquery.ajax - который позволяет вам устанавливать свои собственные заголовки - вы получите лучшее из обоих миров.

Вот плагин jQuery , который динамически создает такую ​​форму для загрузки любого файла.Вы можете использовать это как справку ...

Надеюсь, это поможет

0 голосов
/ 14 декабря 2011

Вы должны настроить $.ajax, используя beforeSend. Ниже приведен пример, но, конечно, я не знаю, подойдет ли вам точная настройка без какого-либо кода. 

$.ajax( {
    url : '/model/user.json',
    dataType : 'json',
    'beforeSend' : function(xhr) {
            var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password);
            var base64 = Crypto.util.bytesToBase64(bytes);
            xhr.setRequestHeader("Authorization", "Basic " + base64);
    },
    error : function(xhr, ajaxOptions, thrownError) {
        reset();
        onError('Invalid username or password. Please try again.');
        $('#loginform #user_login').focus();
    },
    success : function(model) {
        cookies();
            ...
    }
});

Чтобы это работало, вам нужно crypto-js .

...