Mam formularz, który przesyłam (przez GET, ponieważ jest to wymagane) do CRM (ViciDial). Mogę pomyślnie przesłać formularz, ale jeśli to zrobię, plik przetwarzania w CRM po prostu wyświetli tekst o powodzeniu i to wszystko.

Zamiast tego tekstu chcę wyświetlić stronę z podziękowaniami w mojej witrynie, więc zdecydowałem się użyć AJAX do przesłania formularza i przekierowania go na potrzebną stronę, jednak w mojej przeglądarce pojawia się ten błąd:

Zawartość mieszana: strona pod adresem „ https://page.com ” została załadowana przez HTTPS, ale zażądała niezabezpieczonego punktu końcowego XMLHttpRequest „ http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data ”. To żądanie zostało zablokowane; zawartość musi być dostarczana przez HTTPS.

To jest mój skrypt 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>

Samo ustawienie https w adresie URL nie zadziała. Czy jest jakiś sposób, w jaki mogę przesłać dane za pomocą GET i przekierować użytkownika na moją stronę z podziękowaniami?

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

Problem dotyczył mieszanej zawartości, co oznacza, że ​​załadowałem stronę przez HTTPS i próbowałem trafić przez AJAX do API, które było w HTTP. Ale przeglądarka nie pozwoli nam tego po prostu zrobić.

Więc jeśli nie możesz ustawić API na HTTPS (to był mój przypadek), nadal możemy podejść do tego w inny sposób.

Głównym problemem nie był problem z mieszaną zawartością, chodziło o to, że chciałem przesłać dane do API i przekierować użytkowników na fantazyjną stronę z podziękowaniami. Zamiast używać AJAX, utworzyłem plik php, który odbiera dane, wysyła je za pomocą curl do API (ponieważ jest to robione po stronie serwera, nie ma problemu z mieszaną zawartością) i przekierowuje mojego zadowolonego użytkownika na fantazyjną stronę z podziękowaniami.

Jeśli załadujesz stronę w przeglądarce przy użyciu HTTPS, przeglądarka odmówi załadowania jakichkolwiek zasobów przez HTTP. Jak już próbowałeś, zmiana adresu URL interfejsu API na HTTPS zamiast HTTP zazwyczaj rozwiązuje ten problem . Jednak Twój interfejs API nie może zezwalać na połączenia HTTPS. Z tego powodu musisz albo wymusić HTTP na stronie głównej, albo zażądać, aby zezwalały na połączenia HTTPS.

Uwaga: żądanie będzie nadal działać, jeśli przejdziesz do adresu URL interfejsu API zamiast próbować go załadować za pomocą AJAX. Dzieje się tak, ponieważ przeglądarka nie ładuje zasobu z zabezpieczonej strony, zamiast tego ładuje niezabezpieczoną stronę i akceptuje to. Jednak aby był dostępny przez AJAX, protokoły powinny być zgodne.

Rozwiązałem to, dodając następujący kod do strony HTML, ponieważ używamy interfejsu API strony trzeciej, który nie jest przez nas kontrolowany.

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

Mam nadzieję, że to pomoże i to również dla rekordu.

Jeśli właśnie odwiedzasz zaufaną stronę internetową i chcesz szybko przejść do przodu, po prostu:

1- Kliknij ikonę tarczy po prawej stronie paska adresu.

2- W wyskakującym okienku kliknij „Mimo to wczytaj” lub „Załaduj niebezpieczny skrypt” (w zależności od wersji Chrome).

Jeśli chcesz ustawić przeglądarkę Chrome na ZAWSZE (na wszystkich stronach internetowych) zezwalającą na zawartość mieszaną:

1- W otwartej przeglądarce Chrome naciśnij Ctrl + Shift + Q na klawiaturze, aby wymusić zamknięcie Chrome. Chrome musi być całkowicie zamknięty przed następnymi krokami.

2- Kliknij prawym przyciskiem myszy ikonę Google Chrome na pulpicie (lub łącze w menu Start). Wybierz Właściwości.

3- Na końcu istniejących informacji w polu Cel dodaj: „--allow-running-insecure-content” (jest spacja przed pierwszym myślnikiem).

4- Kliknij OK.

5- Otwórz Chrome i spróbuj uruchomić zawartość, która została wcześniej zablokowana. Teraz powinno działać.

Przyczyna tego błędu jest bardzo prosta. Twój AJAX próbuje nawiązać połączenie przez HTTP, podczas gdy twój serwer działa przez HTTPS, więc twój serwer odmawia wywołania AJAX. Można to naprawić, dodając następujący wiersz w tagu head głównego pliku HTML:

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

Jeśli twój kod API działa na serwerze node.js , musisz skupić swoją uwagę na tym, a nie w Apache czy NGINX. Mikel ma rację, zmiana adresu URL API na HTTPS jest odpowiedzią, ale jeśli twoje API wywołuje serwer node.js, lepiej ustawić go na HTTPS! I oczywiście serwer node.js może znajdować się na dowolnym nieużywanym porcie, nie musi to być port 443.

Zamiast używać metody Ajax Post, możesz użyć dynamicznego formularza wraz z elementem. Będzie działać, nawet jeśli strona jest załadowana w SSL, a przesłane źródło nie jest SSL.

Musisz ustawić wartość wartości elementu formularza.

W rzeczywistości nowy dynamiczny formularz zostanie otwarty jako tryb bez SSL w osobnej karcie przeglądarki, gdy atrybut docelowy ustawił „_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()

Miałem ten sam problem, ale dla mnie problemem była komenda ng build. Robiłem "ng build --prod" i poprawiłem to na "ng build --prod --base-href / applicationname /". i to rozwiązało mój problem.

w moim przypadku moim lokalnym hostem był, httpa moja wdrożona wersja to https, więc użyłem tego skryptu, aby dodać metatag http-equiv tylko dla 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)
}