9

Eu preciso pegar conteúdo de outra página dentro do site utilizando Javascript, eu tentei utilizar ajax, porém dá este erro "Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em https://www.google.com.br/. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não está presente)."

Eu preciso pegar o valor de algumas divs e colocar em variáveis, eu preciso fazer isto utilizando JavaScript.

Como fazer isto?

Códito utilizado:

function showUser(str) {
if (str == "") {
    document.getElementById("cabecalho").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("cabecalho").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","https://www.google.com.br");
    xmlhttp.send();
    }
}

showUser("str");
8
  • Eu imagino que você não controla o servidor que hospeda esse conteúdo, certo? Você controla algum servidor onde você possa instalar e.g. um script PHP, que possa fazer a requisição ao servidor com o conteúdo?
    – user25930
    Commented 12/06/2015 às 18:00
  • Não, apenas posso incluir códigos HTML, Javascript e CSS. Commented 12/06/2015 às 18:16
  • Você mencionou em outro comentário que isso é para uma loja online. A loja já está com HTTPS ligado?
    – user25930
    Commented 12/06/2015 às 18:35
  • Eu descobri que só consigo importar páginas do próprio site, se eu tento importar google por exemplo não funciona. (Nem mesmo qualquer outro site) Commented 12/06/2015 às 19:19
  • Ainda preciso importar arquivo de outra página, me ajudem. Nada funciona... Commented 13/06/2015 às 23:42

5 Respostas 5

5
+100

O ajax por segurança não faz cross domain, mas tem um jeitinho brasileiro de se fazer isso vou deixar o exemplo rodando aqui no SO para falicitar :

$(document).ready(function(){
	$("button").click(function(){
		site = $("#site").val();
		$.ajax({
			url: site,
			type: 'GET',
			success: function(res) {
				var headline = $(res.responseText).text();
				$("#conteudo").html(headline);
			}
		});
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<!-- Scripts Javascript -->
<script type="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script>
<title>jQuery e Ajax Cross Domain</title>
</head>

<body>
<input type="text" id="site" value="http://" />
<button id="acessar">Clique para obter o conteúdo deste site</button>
<div id="conteudo" style="background:#EEF0A6"></div>
</body>
</html>

Edit - Nota de esclarecimentos:

  • Foi usado um arquivo .js de James Padolsey (http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/) que teve a idéia de juntar o serviço do YQL( web service do yahoo ) para trabalhar com jQuery. Porém a dúvida que a maioria das pessoas estão me perguntando é se usar esse web-service é seguro. Então dando uma olhada mais a fundo se é viável usar um serviço de terceiros ou se é seguro ou não. então...

É possível fazer o download do projeto e montar seu próprio web service, ou fazer um fork do projeto original e fazer suas customizações caso não queira correr esse risco ;)

github https://github.com/yql/yql-tables

12
  • 2
    -1. Explicação: A resposta introduz três fatores indesejáveis - 1) um middle man que captura todo conteúdo solicitado pelo browser, expondo informação e adicionando complexidade à solução: 2) não funciona para requests em rede interna: 3) A resposta não mostra como o proxy foi implementado, sendo assim incompleta. Sugiro postar o código do proxy.
    – OnoSendai
    Commented 15/06/2015 às 14:52
  • 3
    O código está realizando uma chamada para a api do yahoo que então acessa a página de destino, ou seja, você se torna dependente do serviço do yahoo estar disponível, além de ter mais um site envolvido na requisição.
    – Oeslei
    Commented 15/06/2015 às 15:04
  • Complemente a resposta com mais detalhes sobre como o yahoo query language foi utilizado para realizar a requisição entre domínios.
    – Oeslei
    Commented 15/06/2015 às 16:42
  • Como eu usaria este código sem precisar clicar nos botões (executar quando carregar a página)? Apesar de ser uma resposta criticada, ela funciona com protocolos diferentes correto? Depender do servidor do Yahoo seria um problema, porém é uma resposta válida já que funciona. Commented 15/06/2015 às 16:50
  • 1
    passei no fiddle pois já postei o exemplo prático aqui, mas resumidamente é só retirar os enfeites, retira o botao o input e passa a url diretamente no parametro url do ajax segue link fiddle.jshell.net/9ee2c1fa Commented 15/06/2015 às 17:00
5

Você pode utilizar a função load(). Exemplo de uso:

$( "#resultado" ).load( "ajax/teste.html #container" );

Ou seja, o elemento de ID resultado vai receber o conteúdo que está no elemento de ID container da página teste.html.

6
  • 1
    Se eu entendi, o @Felipe está com problemas de CORS — o outro servidor não está sob o controle dele e não autorizou explicitamente o acesso via JavaScript.
    – user25930
    Commented 12/06/2015 às 18:01
  • 1
    Hmm, pode ser. Se for esse mesmo o problema eu apago minha resposta, ;)
    – Franchesco
    Commented 12/06/2015 às 18:03
  • Estou fazendo uma API para loja integrada, porém não tenho acesso ao PHP e tenho que utilizar somente Javascript, este Javascript ele é inserido no código por um formulário. Não está sobe o meu controle o código. Commented 12/06/2015 às 18:06
  • @FelipeJorge Então esta minha resposta não tem relação com seu problema?
    – Franchesco
    Commented 12/06/2015 às 18:09
  • 1
    Esta é a solução que eu tentei, porém não resolve meu problema. Porém é útil pois pode informar outros usuários. Commented 12/06/2015 às 18:19
5

Para fazer uma requisição entre domínios, como você está fazendo no exemplo, é necessário setar o cabeçalho Access-Control-Allow-Origin na página requerida.

Como você está utilizando o site do Google como exemplo, não será possível, mas se a página for sua, você mesmo pode setar este cabeçalho.

Uma forma de utilizar a página também seria usando um iframe, mas acredito que não seja o que você quer.

UPDATE

Exemplo para setar o cabeçalho em PHP

// permite que qualquer site acesse (destinada a apis públicas)
header("Access-Control-Allow-Origin: *");

// permite que um site específico acesse (destinada a apis privadas)
header("Access-Control-Allow-Origin: https://seu.site.com.br");
1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 24/02/2017 às 19:38
2

Ou no httpd.conf do apache // permite que qualquer site acesse (destinada a apis públicas) Header set Access-Control-Allow-Origin "*"

// permite que um site específico acesse (destinada a apis privadas) Header set Access-Control-Allow-Origin "https://seu.site.com.br"

0
0

Resolvi este problema utilizando um iframe para acessar a url externa, assim não é necessário fazer nenhuma alteração na aplicação de destino.

<iframe src="http://seuServico.do"></iframe>
2
  • Isso é BEM depreciado, e foge ao objetivo da pergunta. Commented 22/11/2016 às 18:05
  • Boa alternativa quando não se pode seguir as sugestões anteriores. Commented 17/05/2021 às 16:34

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 .