HTTP header authentication error

Question

I’m trying to set up a Zopim Reseller API, only I’m facing a problem: Key API authentication and Secret API.

I have the following Javascript code:

<link href="http://static.zopim.com/www_new/bootstrap.min.css" rel="stylesheet">
<script src="http://static.zopim.com/www_new/js/jquery.min.js"></script>
<script src="http://static.zopim.com/www_new/js/bootstrap.min.js"></script>
<script src="http://static.zopim.com/www_new/js/crypto-js/hmac-sha1.js"></script>
<script src="http://static.zopim.com/www_new/js/crypto-js/md5.js"></script>
<script src="http://static.zopim.com/www_new/js/crypto-js/enc-base64-min.js"></script>
<script>

$(function() {
    $('#method').change(function() {
        var method = $(this).val();
        if (method == 'GET' || method == 'DELETE')
            $('#json-group').hide();
        else
            $('#json-group').show();
    });

    $('#send-button').click(function() {
        var url = $('#url').val()
        var a = document.createElement('a');
        a.href = url;
        var method = $('#method').val();
        if (method == 'GET')
            var data = '';
        else
            var data = $.trim($('#json').val());
        var md5 = data ? CryptoJS.MD5(data).toString(CryptoJS.enc.Base64) : '';
        var date = (new Date()).toUTCString();

        var parts = [method, md5, date, a.pathname].join('\n');
        var hmac = CryptoJS.HmacSHA1(parts, $('#api_secret').val());
        var sig = hmac.toString(CryptoJS.enc.Base64);
        var auth = 'Zopim-Reseller-API ' + $('#api_token').val() + ':' + sig;
        var headers = {'API-Date': date, Authorization: auth};
        $.ajax({
            type: method,  dataType: "json", url: url, data: data,  headers: headers,

            success: function(data, status, xhr) {
                var d = $('<div class="row">'
                        + '<h3>Request</h3>'
                        + '<pre>'
                        + method + ' ' + a.pathname + a.search + '\n'
                        + 'Authorization: ' + auth + '\n'
                        + 'API-Date: ' + date + '\n'
                        + '</pre>'
                        + '<h3>Success Response: ' + xhr.status + ' '
                        + xhr.statusText
                        + '</h3>'
                        + '<pre>'
                        + JSON.stringify(data, null, " ") + '</pre>');
                $('#first-row').after(d);
            },
            error: function(xhr, status, error) {
                var d = $('<div class="row">'
                        + '<h3>Request</h3>'
                        + '<pre>'
                        + 'Authorization: ' + auth + '\n'
                        + 'API-Date: ' + date + '\n'
                        + '</pre>'
                        + '<h3 style="color:red">Error Response: '
                        + xhr.status + ' ' + xhr.statusText
                        + '</h3>'
                        + '<pre>'
                        + xhr.responseText + '</pre>');
                $('#first-row').after(d);
            }
        });
    });
});
</script>

<div class="container">
    <h2>Zopim Reseller API Client</h2>
    <div class="row" id="first-row">
        <div class="span10">
            <form class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <label class="control-label">API Credentials</label>
                        <div class="controls">
                            <input type="text" id="api_token" placeholder="API Token" value="" />
                            <input type="text" id="api_secret" placeholder="API Secret" value="" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">URL</label>
                        <div class="controls">
                            <input type="text" id="url" placeholder="URL" style="width: 320px;" value="https://reseller.zopim.com/api/info" />
                            <select id="method" style="width: 100px;">
                                <option>GET</option>
                                <option>PUT</option>
                                <option>POST</option>
                                <option>DELETE</option>
                            </select>
                        </div>
                    </div>
                    <div id="json-group" class="control-group" style="display: none;">
                        <label class="control-label">JSON</label>
                        <div class="controls">
                            <textarea id="json" style="width:450px; height:190px;"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <input type="button" class="btn" id="send-button" value="Request" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

</div>

When running I have to inform the 2 API (Key API and Secret API), I inform both and returns me the following message in Chrome:

Xmlhttprequest cannot load https://reseller.zopim.com/api/info. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

I wonder if anyone can help me because I’m racking my brain and I got nothing.