发送带有自定义标头的普通 ajax HTTP 请求答案

【问题标题】：Sending plain ajax HTTP request with custom header发送带有自定义标头的普通 ajax HTTP 请求
【发布时间】：2014-01-03 19:33:36
【问题描述】：

我有一个现有的 java 客户端，在 IOS 之上，andriod 开发人员准备了一个简单的基于 http 请求的应用程序。并试图在 HTML5 应用程序中实现相同的目标。

目前面临的困难是在 AJAX 请求中发送自定义标头，例如使用加密登录详细信息进行授权。

我尝试在各种 REST 客户端上实现相同的功能，并且能够在请求标头中发送“AUTHORIZATION : BASIC XXXXXX="。并获得正确的 json 响应”

但是，如果我尝试使用 ajax 调用进行相同操作，我将无法发送类似的请求标头。请求作为 OPTIONS 而不是 GET 发送，并且授权标签作为标头无法正常运行，而是作为“Access-Control-Request-Headers:authorization”。

这是我尝试过的sn-ps。

 <script>
    //$.ajaxSetup({ headers: { 'Authorization': 'Basic XXXXXXX='} })


    // get form data for POSTING       
    var vFD = new FormData(document.getElementById('upload_form'));
    var oXHR = new XMLHttpRequest();
    oXHR.open('POST', "https://123.123.123.123:229/");
    //oXHR.send(vFD);



    var body = 'Basic XXXXXXX=';
    var mUrl = "https://123.123.123.123:229/?json";
    var client = new XMLHttpRequest();
    client.open('GET', mUrl, true);
    client.withCredentials = true;
    client.crossDomain = true,

    client.setRequestHeader('Authorization', 'Basic XXXXXXX=');
    client.send(body);



    simpleHttpRequest();
    function simpleHttpRequest() {
        alert("calling ");

        var headers = {
            "Authorization": "Basic XXXXXXX="
        };
        $.ajaxSetup({ "headers": headers });
        $.ajaxSetup({ 'cache': false });
        $.ajax({
            type: "GET",
            withCredentials: true,
            //                data: {
            //                    address: 'http://www.google.com'
            //                },
            crossDomain: true,
            Headers: { "Authorization": "Basic XXXXXXX=" },
            dataType: "jsonp",
            url: mUrl,
            cache: false
        });
    }

    xhrToSend();
    function xhrToSend() {
        // Attempt to creat the XHR2 object
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            try {
                xhr = new XDomainRequest();
            } catch (e) {
                try {
                    xhr = new ActiveXObject('Msxml2.XMLHTTP');
                } catch (e) {
                    try {
                        xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    } catch (e) {
                        statusField('\nYour browser is not' +
                    ' compatible with XHR2');
                    }
                }
            }
        }
        xhr.withCredentials = true;
        xhr.open('GET', mUrl, true);
        xhr.setRequestHeader("Authorization", "numberOfBLObsSent");
        xhr.send();
    };
</script>

以及所有失败的方式。请帮我。

提前致谢。

【问题讨论】：

标签： javascript jquery http-headers xmlhttprequest

【解决方案1】：

该问题与请求的跨域性质有关。当您发出包含自定义标头的跨域请求时，该请求首先通过 OPTIONS 方法“预检”到服务器，并且服务器必须以标头 Access-Control-Allow-Headers: your-custom-header 进行响应。收到此信息后，ajax 客户端将（自动）发出实际请求。