Tenho um formulário que estou enviando (por meio de GET, pois é necessário dessa forma) para um crm (ViciDial). Posso enviar o formulário com êxito, no entanto, se fizer isso, o arquivo de processamento em crm apenas exibirá um texto de sucesso e pronto.

Em vez desse texto, desejo exibir uma página de agradecimento em meu site, então decidi usar AJAX para enviar o formulário e redirecioná-lo para a página de que preciso, mas estou recebendo este erro no meu navegador:

Conteúdo misto: a página em ' https://page.com ' foi carregada por HTTPS, mas solicitou um ponto de extremidade XMLHttpRequest inseguro ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data '. Esta solicitação foi bloqueada; o conteúdo deve ser servido por HTTPS.

Este é meu script AJAX:

    <script>
    SubmitFormClickToCall = function(){

        jQuery.ajax({
            url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
            data : jQuery("#form-click-to-call").serialize(),
            type : "GET",
            processData: false,
            contentType: false,
            success: function(data){
                window.location.href = "https://www.example.com/thank-you";
            }
        });
    }
    </script>

Apenas definir https na URL não funcionará. Existe alguma maneira de enviar os dados via GET e redirecionar o usuário para a minha página de agradecimento?

==============================

O problema aqui era conteúdo misto, isso significa que carreguei uma página via HTTPS e estava tentando acertar via AJAX uma API que estava em HTTP. Mas o navegador não nos permite apenas fazer isso.

Portanto, se você não pode definir a API como HTTPS (este foi o meu caso), ainda podemos abordar isso de uma maneira diferente.

O principal problema não era o problema de conteúdo misto, era que eu queria enviar dados para uma API e redirecionar os usuários para uma página de agradecimento sofisticada. Em vez de usar AJAX, criei um arquivo php que recebe os dados e os envia usando curl para a API (como isso está sendo feito no lado do servidor, não há problema de conteúdo misto) e redireciona meu feliz usuário para uma página de agradecimento sofisticada.

Se você carregar uma página em seu navegador usando HTTPS, o navegador se recusará a carregar quaisquer recursos por HTTP. Como você tentou, alterar o URL da API para HTTPS em vez de HTTP normalmente resolve esse problema . No entanto, sua API não deve permitir conexões HTTPS. Por isso, você deve forçar o HTTP na página principal ou solicitar que eles permitam conexões HTTPS.

Observação sobre isso: a solicitação ainda funcionará se você acessar a URL da API em vez de tentar carregá-la com AJAX. Isso ocorre porque o navegador não está carregando um recurso de uma página segura, em vez disso, está carregando uma página não segura e está aceitando isso. Para que esteja disponível por meio do AJAX, no entanto, os protocolos devem ser correspondentes.

Resolvi isso adicionando o seguinte código à página HTML, uma vez que estamos usando a API de terceiros que não é controlada por nós.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Espero que isso ajude, e para registro também.

Se você estiver apenas visitando uma página da web em que confia e quiser avançar rapidamente, basta:

1- Clique no ícone de escudo na extremidade direita da barra de endereço.

2- Na janela pop-up, clique em "Carregar mesmo assim" ou "Carregar script não seguro" (dependendo da versão do Chrome).

Se você deseja configurar seu navegador Chrome para SEMPRE (em todas as páginas da web) permitir conteúdo misto:

1- Em um navegador Chrome aberto, pressione Ctrl + Shift + Q no teclado para forçar o fechamento do Chrome. O Chrome deve ser totalmente fechado antes das próximas etapas.

2- Clique com o botão direito no ícone da área de trabalho do Google Chrome (ou no link do Menu Iniciar). Selecione Propriedades.

3- Ao final das informações existentes no campo Destino, adicione: "--allow-running-insecure-content" (há um espaço antes do primeiro travessão).

4- Clique em OK.

5- Abra o Chrome e tente iniciar o conteúdo que foi bloqueado anteriormente. Deve funcionar agora.

O motivo desse erro é muito simples. Seu AJAX está tentando chamar por HTTP enquanto seu servidor está executando por HTTPS, então seu servidor está negando a chamada de seu AJAX. Isso pode ser corrigido adicionando a seguinte linha dentro da tag head do seu arquivo HTML principal:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

Se o código da API estiver sendo executado em um servidor node.js , você precisa focar sua atenção nele, não no Apache ou NGINX. Mikel está certo, mudar a URL da API para HTTPS é a resposta, mas se sua API está chamando um servidor node.js, é melhor configurá-la para HTTPS! E, claro, o servidor node.js pode estar em qualquer porta não utilizada, não precisa ser a porta 443.

Em vez de usar o método Ajax Post, você pode usar a forma dinâmica junto com o elemento. Funcionará mesmo que a página seja carregada em SSL e a fonte enviada não seja SSL.

Você precisa definir o valor do valor do elemento do formulário.

Na verdade, um novo formulário dinâmico será aberto como modo não SSL em uma guia separada do navegador quando o atributo de destino tiver definido '_blank'

var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"

var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);



//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);

document.body.appendChild(f);
f.submit()

Eu estava com o mesmo problema, mas para mim o problema era o comando build. Eu estava fazendo "ng build --prod" e corrigi-lo para "ng build --prod --base-href / applicationname /". e isso resolveu meu problema.

no meu caso, meu localhost era httpe minha versão implantada era https, então usei este script para adicionar a metatag http-equiv apenas para https:

if (window.location.protocol.indexOf('https') == 0){
  var el = document.createElement('meta')
  el.setAttribute('http-equiv', 'Content-Security-Policy')
  el.setAttribute('content', 'upgrade-insecure-requests')
  document.head.append(el)
}