Problem z AJAX na zewnętrzny serwer CORS

Question

Witam , planuje w najbliższym czasie tworzyć aplikacje mobilne głównie dla siebie. Podczas tworzenia natrafiłem na taki problem w konsoli w przeglądarce ;
Access to XMLHttpRequest at 'https://moja-strona.pl/test.php' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

i jeszcze taki 
POST https://www.moja-strona.pl/test.php net::ERR_FAILED

Rozumiem, że jest to zabezpieczenie pomiędzy serwerami, jednak musi się dać jakoś to obejść,w jakiś sposób uzyskać uprawnienia do tej strony.

Czy mógłby ktoś opisać jak to ma wyglądać po stronie klienta i po stronie serwera?

Aktualnie wykonywałem klasyczne zapytanie ajax z tym, że url zewnętrzny na konkretny plik:

Po stronie klienta:
 

function CORS()
                            {
                                $.ajax({
                                    url:"https://www.mojastrona.pl/app/test.php",
                              
                                    type: 'POST',
                                    crossDomain: true,
                                 
                                    data:{},
                                   
                                    success:function(data)
                                    {
                                       
                                      alert(data);
                                   
										
                                    },
									error: function() {
										alert('CORS error');
									}


                                });
                            } 

Oraz po stronie serwera:
 

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

echo "Przykladowy tekst";
?>

Próbowałem z tymi nagłówkami, czy bez nich, efekt taki sam. Oraz przykładowe kody z innych stron i dalej to samo.

Comments

Zobacz w zakładce Network (Sieć) devtools'ów przeglądarki, czy serwer faktycznie zwrócił ustawione nagłówki w response.

---

Niestety zwraca błąd "Failed to load response data" , od czego to może być zależne ?

---

Miałem na myśli zawartość nagłówków zwrotnych (Response Headers) z tej zakładki: https://developers.google.com/web/tools/chrome-devtools/network/reference#headers

---

Tak to wygląda po stronie klienta , dodaje też linka do zdjęcia, bo widzę że słabo się tutaj ładuje : https://tinypic.pl/fbvpgy31gxvv

---

Czy w innej przeglądarce (np. Firefox) jest ten sam problem? Jeśli tak, to czy tam też serwer nie zwraca odpowiednich nagłówków w odpowiedzi na request?

Serwer zwrócił kod 301 próbując przekierować użytkownika na adres podany w nagłówku location. Czy to przekierowanie ustawiłeś celowo, czy to jakiś automatyczny mechanizm serwera?

[edycja]

Na screenie widać trzy inne adresy:

• ten, z którego wysłałeś zapytanie (Referer),
• ten, pod który docelowo wysłałeś request (Request URL)
• ten, na który przekierował Cię serwer (location)

Moim zdaniem, CORSy włączyłeś dla docelowego adresu, ale serwer przekierował Cię na inny adres, który już nie ma ustawionych nagłówków CORS.

---

Faktycznie wielkie dzięki! wreszcie jakiś postęp. Ruszyło udało się dane JSON. Właśnie te 3 adresy były problemem.Na dwóch serwerach z protokołem HTTP nie ma problemu. Ale łączyłem się do innego z protokołem HTTPS jednak automatycznie pokazuje jakby response był HTTP. W jaki sposób można to zmienić ?

---

udało się odebrać plik JSON, I rozumiem, że da się w ten sposób odebrać tylko pliki JSON czy jest możliwość zwrotu całych danych bez konieczności pakowania ich? 

Ajax-em możesz wysłać dane w innym formacie niż JSON. W teorii możesz posłużyć się którymś z tej listy. W praktyce, najczęściej używa się JSON; jQuery zdaje się domyślnie korzystać z "application/x-www-form-urlencoded; charset=UTF-8", ale możesz to zmienić ustawiając property contentType na inny typ MIME w opcjach metody $.ajax.

Łączyłem się z protokołem HTTPS jednak automatycznie pokazuje jakby response był HTTP

Według tego co widać na screenie, request wysłałeś na protokół HTTPS, ale strona z której to zrobiłeś używała HTTP, tak samo jak strona na którą przekierował Cię serwer.

---

Ogólnie dziękuje Ci bardzo, działa jak należy, mam jeszcze problem własnie z tym HTTPS, ponieważ strona na która się łącze posiada certyfikat ssl przez co działa też na protokole HTTPS, W AJAX podaje url: "https" jednak w nagłówkach "location" podana strona zamienia się na "HTTP"

---

Doczytaj w dokumentacji serwera jak zrobić przekierowanie z HTTP na HTTPS. To, że w URLu do zapytania ajax podajesz HTTPS i serwer to wspiera to jedno, ale w zwrotnym nagłówku location następuje przekierowanie na inny adres (już HTTP bez "S") niż ten z zapytania ajax-owego - więc musisz to przekierowanie przełączyć z HTTP na HTTPS.