2

Estou com o seguinte código:

$(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({
      url: url,
      type: method,
      dataType: 'json',
      success: function() { alert('hello!'); },
      error: function() { alert('boo!'); },
      beforeSend: setHeader
         });

         function setHeader(xhr) {
    xhr.setRequestHeader('Authorization', auth);
    xhr.setRequestHeader('API-Date', date);
  }
    });
});

Esse código deveria mandar uma requisição GET, só que no Chrome ele me informa os seguintes dados:

Remote Address:67.23.229.9:443
Request URL:https://reseller.zopim.com/api/info
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, authorization, api-date
Access-Control-Request-Method:GET
Connection:keep-alive
Host:reseller.zopim.com
Origin:http://zopim.net.br

E por consequência da esse erro:

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

5
  • Lendo a documentação para /info aqui: sites.google.com/a/zopim.com/reseller/api/info vejo que o que eles querem é email e password. Já tentou isso ou o token como chave do header?
    – Sergio
    Commented 13/06/2014 às 22:14
  • Essas 2 linhas: var auth = 'Zopim-Reseller-API ' + $('#api_token').val() + ':' + sig; var headers = {'API-Date': date, Authorization: auth}; São as que formam o HEADER para ele fazer uma especie de login para pegar as informações do /info só que envez de ficar como GET está me retornando como se eu tivesse mandado OPTIONS Commented 13/06/2014 às 22:31
  • E já tentou usar os parametros que eles referem no CURL? xhr.setRequestHeader('email', email); xhr.setRequestHeader('password', password); ?
    – Sergio
    Commented 13/06/2014 às 22:36
  • Não, mas eles se referem a autentificação da variavel auth e do parametro 'API-Date' Commented 14/06/2014 às 1:37
  • Nessa página /info não encontro nada sobre autentificação com API-Date. Onde está essa informação?
    – Sergio
    Commented 14/06/2014 às 6:05

2 Respostas 2

2

O problema é Cross-Origin Resource Sharing.

O protocolo HTTP considera, como requisições simples, os seguintes métodos:

  • GET
  • POST
  • HEAD

Os demais, como OPTIONS, são Preflighted Requests. OPTIONS em específico serve para zelar pela segurança da requisição. Os dados trafegados vão até o servidor para ele determinar se são informações seguras ou não – caso sejam, o objeto é "descompactado" e lido de uma determinada maneira prevista pelo próprio [servidor].

O seu dataType, neste caso, é json, o seu método é GET, e você está usando um header personalizado, portanto, a sua requisição é "preflighted" – o que significa que a menos que seja especificado no servidor, o método será OPTIONS.

0

O que ocorre é o seguinte, para métodos de requisição HTTP que podem causar efeitos colaterais nos dados do servidor (em particular, para métodos HTTP que não sejam GET, ou para utilização de GET com certos MIME types), a especificação determina que navegadores "pré-enviem" a requisição, solicitando os métodos suportados pelo servidor com um método de requisição HTTP OPTIONS, e depois, após "aprovação" do servidor, envie a requisição verdadeira com o método de requisição HTTP efetivo.

Por padrão os navegadores não enviam o HTTP Header Authorization nas requisições HTTP OPTIONS, portanto o seu servidor/API deve estar exigindo Authorization para todos o Métodos HTTP e por isso dá erro na primeira requisição HTTP OPTIONS e barra a requisição HTTP GET.

Para corrigir o problema você deve configurar seu servidor/API para permitir requisições HTTP OPTIONS sem o Header Authorization.

Informações retiradas de:
- Controle de Acesso HTTP (CORS) - HTTP | MDN
- cors - Authorization header not sent with http request angular 6 with OPTIONS method - Stack Overflow

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .