8

Olá um tempo atrás eu fiz esta pergunta:

Pegar conteúdo de outra página por javascript ou jquery

O colega @SneepSNinjA fez o seguinte algoritmo que funcionou.

$(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/2.1.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>

Porém, há um problema. Este código pega conteúdo cross domain. Mas não funciona para todo tipo de protocolo.

Se você tiver um site http ele funciona corretamente, porém se tiver um site https ele não irá funcionar. (Se estiver em um protocolo http ele pega conteúdo de http porém se estiver em um https ele dá erro.)

Estou querendo implementar esta função no site: https://ebookstore.xtechcommerce.com/acessorios

e ele dá o seguinte erro:

Exemplo com protocolo https:

Exemplo do erro cross domain

Troquei o protocolo e ele funcionou, porém tem que funcionar em ambos protocolos (Pois vai ser uma API).


Exemplo com o protocolo http:

inserir a descrição da imagem aqui

Cheguei a conclusão com este erro que o protocolo devia ser http para funcionar no site. Porém já que estou fazendo uma API o script não tem que somente chamar os dois protocolos, tem também que funcionar nos dois protocolos.

Alguém pode me ajudar?

Existe algumas questões parecidas, porém não é preciso somente que pegue conteúdo cross domain, ele precisa funcionar nos dois tipos de protocolos. Tem que funcionar tanto para http quanto para https.

Carregar e ler XML via AJAX Cross-Domain

Requisição Ajax cross-domain com Javascript puro (sem APIs)

Por isto não seria viável trocar o protocolo para http.

Estava pensando em talvez utilizar um if, se for http ele usa um dominio para fazer o cross se for https ele usa outra.

Porém talvez tenha uma solução mais prática.

Me ajudem ^~

4
  • Recentemente resolvi um problema parecido com um Jason dê num domínio sem cabeçalhos, como eu tinha acesso a api que listava o json eu apenas fiz um php q copiava o conteúdo da url daquele json e salvava em um json dentro do meu Server, e assim eu conseguia ler tudo sem problema. Fiz uma tarefa Cron no Server que rodava o script php de cópia a cada 1 hora mantendo o meu json sempre atualizado. As vezes é uma saída. Commented 18/07/2015 às 14:25
  • Parabéns para os demais que também chegaram a mesma solução, mas eu resolvi primeiro :P Commented 20/07/2015 às 19:29
  • Vou verificar as respostas uma a uma e recompensarei quem deu a melhor solução. Obrigado Commented 20/07/2015 às 20:26
  • já verificou se dá erro com saída em: //projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js Commented 22/07/2015 às 18:12

3 Respostas 3

10
+25

Ao invés de especificar o protocolo na propriedade src:

<script 
        type="text/javascript" 
        src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"
></script>

Omita-o.

<script 
        type="text/javascript" 
        src="//projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"
></script>

O nome dessa prática é Protocol-Relative URL (URL relativa ao protocolo), especificada na RFC 1808.

Isso irá fazer o navegador carregar o recurso utilizando o mesmo protocolo da página que o chama.

Tenha em mente, entretanto, que na versão atual do Internet Explorer uma PRURL fará com que o browser sempre tente carregar tanto a versão HTTP quanto a versão HTTPS, causando assim duas requisições.

1
  • +1, a sua resposta resume o que eu respondi =) Commented 20/07/2015 às 19:50
7

Se o site em questão possui acesso tanto por http quanto por https basta você remover o protocolo da requisição que o browser irá utilizar o protocolo atual. Essa técnica é bastante utilizada para carregar bibliotecas através de um CDN.

Por exemplo, a url http://exemplo.com/usuarios (ou https://exemplo.com/usuarios) ficaria //exemplo.com/usuarios e o browser irá buscar automaticamente através do protocolo atual (http no localhost e em sites que utilizam http e https no servidor).

1
  • +1, sua resposta está essencialmente correta. =)
    – OnoSendai
    Commented 20/07/2015 às 19:41
4

Editado

Vou passar um exemplo já rodando com o site em questão, e vou passar o https:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Scripts Javascript -->

<title>jQuery e Ajax Cross Domain</title>
</head>

<body>
    <input type="text" id="site" value="https://ebookstore.xtechcommerce.com/acessorios" size="100" />
<button id="acessar">Clique para obter o conteúdo deste site</button>
<div id="conteudo" style="background:#EEF0A6"></div>
<script>
    /**
 * jQuery.ajax mid - CROSS DOMAIN AJAX 
 * ---
 * @author James Padolsey (http://james.padolsey.com)
 * @version 0.11
 * @updated 12-JAN-10
 * ---
 * Note: Read the README!
 * ---
 * @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
 */

jQuery.ajax = (function(_ajax){
    
    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
        query = 'select * from html where url="{URL}" and xpath="*"';
    
    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }
    
    return function(o) {
        
        var url = o.url;
        
        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
            
            // Manipulate options so that JSONP-x request is made to YQL
            
            o.url = YQL;
            o.dataType = 'json';
            
            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };
            
            // Since it's a JSONP request
            // complete === success
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }
            
            o.success = (function(_success){
                return function(data) {
                    
                    if (_success) {
                        // Fake XHR callback.
                        _success.call(this, {
                            responseText: data.results[0]
                                // YQL screws with <script>s
                                // Get rid of them
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }
                    
                };
            })(o.success);
            
        }
        
        return _ajax.apply(this, arguments);
        
    };
    
})(jQuery.ajax);
    $(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);
                                $('#conteudo').html(res.responseText);
			}
		});
	});
        $("#acessar").click();
});
</script>
</body>
</html>

Rodou normalmente, os únicos erros que encontrei foram ref. as imagens, então ainda não entendi onde que o erro acontece. Eu rodei localhost onde o meu apache é http HTTPS, depois rodei aqui no SOPT onde é https, e testei o site com o link que você passou (https) e funcionou.

OBS: O erro de carregando de conteudo mesclado ocorre porque seu serviço https precisa receber o arquivo jquery.xdomainajax.js em https, como você esta linkando ele no http ele da esse erro, tente usar o exemplo que passei agora onde não faço esse carregamento mesclado que vai rodar, e/ou grave a parte do plugin em um arquivo separado no seu server https e chama ele ou escreva o plugin inteiro como fiz que também resolve.

4
  • É simples, dependendo do protocolo do site ele dá erro, se o protocolo for http: ele não dá erro, se ele for https ele dá erro. Podemos testar isto simplesmente entrando no carrinho do site, lá o protocolo é https então vai dar erro. Você não conseguiu ver o erro por que o protocolo do site está http, se você entrar no carrinho ele vai virar https e vai mostrar o erro. Commented 20/07/2015 às 16:13
  • O que você está tentando fazer? No caso o protocolo que eu digo é o do servidor. Você testou em um servidor https? Commented 20/07/2015 às 18:17
  • Acho que você não entendeu a pergunta, o problema não é o código mas sim o protocolo. Ou seja: O protocolo utilizado no site hospedado. O Stack Overflow utiliza protocolo http, logo irá funcionar o código. Agora se você utilizar este código em um protocolo https ele irá falhar. Commented 20/07/2015 às 18:31
  • @FelipeJorge consegui o simular certinho o erro do carregamento mesclado, editei novamente a resposta Commented 20/07/2015 às 19:03

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 .