jQuery.getJSON – Access-Control-Allow-Origin Issue

Estou usando a function $.getJSON() do jQuery para retornar um conjunto curto de dados JSON.

Eu tenho os dados JSON em uma URL, como example.com . Eu não percebi isso, mas como eu estava acessando o mesmo URL, os dados JSON não puderam ser carregados. Eu segui o console e descobri que o XMLHttpRequest não pôde ser carregado devido ao Access-Control-Allow-Origin .

Agora, eu li através de muitos sites que apenas disseram para usar $.getJSON() e esse seria o trabalho, mas obviamente não funcionou. Há algo que eu deveria mudar nos headers ou na function?

Ajuda é muito apreciada.

É simples, use a function $.getJSON() e no seu URL apenas inclua

callback =

como um parâmetro. Isso converterá a chamada em JSONP, necessária para fazer chamadas entre domínios. Mais informações: http://api.jquery.com/jQuery.getJSON/

Você pode querer usar o JSON-P (veja abaixo). Primeiro uma explicação rápida.

O header que você mencionou é do padrão Cross Origin Resource Sharing . Cuidado com o fato de não ser suportado por alguns navegadores que as pessoas realmente usam, e em outros navegadores (Microsoft, suspiro ) é necessário usar um object especial ( XDomainRequest ) em vez do XMLHttpRequest padrão que o jQuery usa. Também requer que você altere resources do lado do servidor para permitir explicitamente a outra origem ( www.xxxx.com ).

Para obter os dados JSON que você está solicitando, basicamente você tem três opções:

  1. Se possível, você pode ser maximamente compatível, corrigindo a localização dos arquivos que está carregando, para que eles tenham a mesma origem do documento no qual você está carregando. (Eu suponho que você deve estar carregando-os via Ajax, daí a questão da Política de mesma origem aparecendo.)

  2. Use JSON-P , que não está sujeito ao SOP. O jQuery tem suporte embutido para ele em sua chamada ajax (basta definir dataType como “jsonp” e o jQuery fará todo o trabalho do lado do cliente). Isso requer mudanças no lado do servidor, mas não muito grandes; basicamente, o que você tem gerando a resposta JSON procura apenas um parâmetro de string de consulta chamado “callback” e envolve o JSON no código JavaScript que chamaria essa function. Por exemplo, se sua resposta JSON atual for:

     {"weather": "Dreary start but soon brightening into a fine summer day."} 

    Seu script procuraria o parâmetro de string de consulta “callback” (digamos que o valor do parâmetro é “jsop123”) e agrupa esse JSON na syntax de uma chamada de function JavaScript:

     jsonp123({"weather": "Dreary start but soon brightening into a fine summer day."}); 

    É isso aí. O JSON-P é muito amplamente compatível (porque funciona através de tags de script JavaScript). O JSON-P é apenas para GET , no entanto, não POST (novamente porque funciona por meio de tags de script ).

  3. Use CORS (o mecanismo relacionado ao header que você citou). Detalhes na especificação vinculada acima , mas basicamente:

    R. O navegador enviará ao seu servidor uma mensagem de “comprovação” usando o verbo HTTP OPTIONS (método). Ele conterá os vários headers que ele enviaria com o GET ou POST , bem como os headers “Origem”, “Método de Solicitação de Controle de Acesso” (por exemplo, GET ou POST ) e “Cabeçalhos de Pedido de Controle de Acesso”. (os headers que ele quer enviar).

    B. Seu PHP decide, com base nessas informações, se a solicitação está correta e, se for o caso, responde com os comandos “Access-Control-Allow-Origin”, “Access-Control-Allow-Methods” e “Access-Control-Allow- Cabeçalhos “headers com os valores que serão permitidos. Você não envia nenhum corpo (página) com essa resposta.

    C. O navegador examinará sua resposta e verá se é permitido enviar a você o GET ou POST real. Em caso afirmativo, enviará essa solicitação novamente com os headers “Origem” e vários “Acessar-Controle-Solicitar-xyz”.

    D. Seu PHP examina esses headers novamente para ter certeza de que eles ainda estão bem e, se for o caso, responde à solicitação.

    Em pseudo- código (eu não fiz muito PHP, então eu não estou tentando fazer syntax PHP aqui):

     // Find out what the request is asking for corsOrigin = get_request_header("Origin") corsMethod = get_request_header("Access-Control-Request-Method") corsHeaders = get_request_header("Access-Control-Request-Headers") if corsOrigin is null or "null" { // Requests from a `file://` path seem to come through without an // origin or with "null" (literally) as the origin. // In my case, for testing, I wanted to allow those and so I output // "*", but you may want to go another way. corsOrigin = "*" } // Decide whether to accept that request with those headers // If so: // Respond with headers saying what's allowed (here we're just echoing what they // asked for, except we may be using "*" [all] instead of the actual origin for // the "Access-Control-Allow-Origin" one) set_response_header("Access-Control-Allow-Origin", corsOrigin) set_response_header("Access-Control-Allow-Methods", corsMethod) set_response_header("Access-Control-Allow-Headers", corsHeaders) if the HTTP request method is "OPTIONS" { // Done, no body in response to OPTIONS stop } // Process the GET or POST here; output the body of the response 

    Mais uma vez, salientando que este é o pseudo-código.

    Intereting Posts