0Pricing
jQuery Academy · Aula

AJAX entre Domínios (CORS/JSONP)

Compreenda e aplique técnicas para fazer solicitações AJAX entre domínios usando JSONP ou configurando cabeçalhos CORS no servidor para uma troca segura de dados.

AJAX entre Domínios (CORS/JSONP) é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

AJAX entre domínios: o desafio

Quando o seu site tenta buscar dados de outro site, isso é chamado de solicitação AJAX entre domínios. Isso costuma ser complicado!

Por padrão, os navegadores da Web têm uma regra de segurança que impede uma página da Web de fazer solicitações a um domínio diferente daquele de onde se originou. Essa regra protege os seus dados.

Entendendo a política de mesma origem

A regra de segurança mencionada é chamada de Política de mesma origem (SOP). Ela é um recurso fundamental de segurança dos navegadores.

A SOP determina que um navegador da Web permite que scripts contidos em uma primeira página da Web acessem dados de uma segunda página da Web somente se ambas tiverem a mesma origem (domínio, protocolo e porta).

  • Exemplo: uma página de mywebsite.com não pode buscar dados de api.anotherdomain.com diretamente.

CORS: uma solução moderna

Para permitir solicitações entre domínios com segurança, a comunidade da Web desenvolveu o compartilhamento de recursos entre origens (CORS). Essa é a forma moderna e padrão de lidar com esse caso.

O CORS funciona permitindo que o servidor informe explicitamente ao navegador que determinados outros domínios podem acessar os seus recursos.

CORS: configuração no servidor

O CORS é configurado principalmente no servidor que fornece os dados. O servidor envia cabeçalhos HTTP especiais na resposta para indicar quais origens têm permissão.

O cabeçalho principal é Access-Control-Allow-Origin. Ele especifica quais domínios podem acessar o recurso.

  • Access-Control-Allow-Origin: * (permite qualquer domínio)
  • Access-Control-Allow-Origin: https://yourdomain.com (permite somente um domínio específico)

CORS: solicitações do cliente com jQuery

Do lado do cliente (usando jQuery), fazer uma solicitação CORS geralmente não é diferente de fazer uma solicitação AJAX comum, desde que o servidor esteja configurado corretamente.

O jQuery cuida da comunicação no nível do navegador. Você só precisa apontar a chamada $.ajax() para a URL entre domínios.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: solicitações de verificação preliminar (OPTIONS)

Para determinadas solicitações CORS "complexas", os navegadores fazem uma solicitação de verificação preliminar antes de enviar a solicitação real. Essa é uma etapa extra de segurança.

Uma solicitação de verificação preliminar usa o método HTTP OPTIONS para pedir permissão ao servidor. Se o servidor conceder essa permissão, o navegador enviará a solicitação real (por exemplo, PUT, DELETE ou solicitações com cabeçalhos personalizados).

JSONP: uma alternativa mais antiga

Antes de o CORS ser amplamente adotado, o JSONP (JSON com preenchimento) era uma solução comum para solicitações entre domínios, especialmente em navegadores ou APIs mais antigos.

O JSONP contorna a Política de mesma origem usando de forma criativa a permissão do navegador para carregar tags <script> de qualquer domínio.

JSONP: o mecanismo

Veja como o JSONP funciona:

  • Você cria dinamicamente uma tag <script> e define o atributo src como a URL entre domínios.
  • O servidor, esperando uma solicitação JSONP, envolve os dados JSON em uma chamada de função (o "preenchimento").
  • O navegador executa esse script, chamando uma função definida globalmente na sua página e passando os dados como argumento.

JSONP: implementação com jQuery

O jQuery simplifica bastante a implementação de JSONP. Você só precisa especificar dataType: "jsonp" na chamada $.ajax().

O jQuery cria automaticamente a tag <script> dinâmica, gera um nome exclusivo para a função de retorno e a executa quando a resposta chega.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS e JSONP: principais diferenças

Embora ambos resolvam problemas entre domínios, CORS e JSONP têm características distintas:

  • CORS: padrão moderno, usa cabeçalhos HTTP, é seguro, oferece suporte a todos os métodos HTTP e exige configuração no servidor.
  • JSONP: solução mais antiga, usa tags <script>, é menos seguro, aceita somente solicitações GET, é uma técnica do lado do cliente e exige que o servidor envolva a resposta.

Verificação rápida: entre domínios

Quais das afirmações a seguir são TRUE sobre solicitações AJAX entre domínios?

Revisão: domínio das solicitações entre domínios

Você aprendeu a contornar a Política de mesma origem em solicitações AJAX entre domínios!

  • O CORS é o padrão moderno e seguro, baseado em cabeçalhos HTTP do servidor para conceder permissão.
  • O JSONP é uma solução mais antiga e menos segura para solicitações GET, usando tags <script> dinâmicas.

Prefira sempre o CORS quando possível, pois ele é mais seguro e flexível. O JSONP é usado principalmente em sistemas antigos ou cenários específicos.

Perguntas Frequentes

A aula “AJAX entre Domínios (CORS/JSONP)” é grátis?

Sim — o texto completo de “AJAX entre Domínios (CORS/JSONP)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “AJAX entre Domínios (CORS/JSONP)”?

Compreenda e aplique técnicas para fazer solicitações AJAX entre domínios usando JSONP ou configurando cabeçalhos CORS no servidor para uma troca segura de dados. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.

Quanto tempo leva a aula “AJAX entre Domínios (CORS/JSONP)”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração Eficiente de Solicitações AJAX
  2. Tratamento de Erros e Sucessos em AJAX
  3. AJAX entre Domínios (CORS/JSONP)
← Voltar para jQuery Academy