jQuery Ajax Notes
- Devido a restrições de segurança do navegador, a maioria das solicitações do Ajax está sujeita à mesma política de origem ; a solicitação não pode recuperar dados de um domínio, subdomínio, porta ou protocolo diferente.
- As solicitações de script e JSONP não estão sujeitas às mesmas restrições de política de origem.
Existem algumas maneiras de superar a barreira entre domínios :
Existem alguns plugins que ajudam com solicitações entre domínios :
Atenção!
A melhor maneira de superar esse problema é criando seu próprio proxy no back-end, para que o seu proxy aponte para os serviços em outros domínios, porque no back-end não existe a mesma restrição de política de origem . Mas se você não pode fazer isso no back-end, preste atenção às dicas a seguir.
Aviso!
O uso de proxies de terceiros não é uma prática segura, pois eles podem acompanhar seus dados, para que possam ser usados com informações públicas, mas nunca com dados privados.
Os exemplos de código mostrados abaixo usam jQuery.get () e jQuery.getJSON () , ambos são métodos abreviados de jQuery.ajax ()
CORS Anywhere
O CORS Anywhere é um proxy node.js que adiciona cabeçalhos CORS à solicitação em proxy.
Para usar a API, basta prefixar o URL com o URL da API. (Suporta https : consulte o repositório do github )
Se você deseja ativar automaticamente solicitações entre domínios, quando necessário, use o seguinte snippet:
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Qualquer Origem
Qualquer que seja a origem, é um acesso jsonp entre domínios . Esta é uma alternativa de código aberto ao anyorigin.com .
Para buscar os dados do google.com, você pode usar este snippet:
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
Proxy CORS
O Proxy CORS é um proxy node.js simples para ativar a solicitação do CORS para qualquer site. Ele permite que o código javascript no seu site acesse recursos em outros domínios que normalmente seriam bloqueados devido à política de mesma origem.
Como funciona? O Proxy CORS aproveita o Compartilhamento de Recursos de Origem Cruzada, um recurso que foi adicionado juntamente com o HTML 5. Os servidores podem especificar que desejam que os navegadores permitam que outros sites solicitem os recursos que hospedam. O Proxy CORS é simplesmente um Proxy HTTP que adiciona um cabeçalho às respostas dizendo "qualquer pessoa pode solicitar isso".
Essa é outra maneira de atingir a meta (consulte www.corsproxy.com ). Tudo o que você precisa fazer é retirar o http: // e o www. a partir do URL que está sendo enviado por proxy e preceda o URL comwww.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Navegador proxy CORS
Recentemente eu encontrei este, envolve vários utilitários de compartilhamento remoto de origem cruzada, orientados para a segurança. Mas é uma caixa preta com o Flash como back-end.
Você pode vê-lo em ação aqui: Navegador proxy CORS
Obtenha o código-fonte no GitHub: koto / cors-proxy-browser