• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z headerem przy pobieraniu danych

VPS Starter Arubacloud
+1 głos
4,647 wizyt
pytanie zadane 22 sierpnia 2020 w PHP przez Greeenone Pasjonat (16,100 p.)

Dobry wieczór,

Mam pewien problem z moją apką rozbitą na front w vuejs i backend w php. Chodzi o to, że któraś ze stron blokuje nagłówki po deployu.
Backend: Sprawdzałem czy to jakiś problem po jego stronie. Wysłałem requesty z postmana i na każdy dostałem odpowiedź.

Frontend: Zrobiłem podobnie. Wstawiłem linki do stron aby sprawdzić, czy dane zostaną pobrane i.. Zostały pomyślnie pobranie.

Gdy spinam frontend i backend ze sobą, przeglądarka zwraca następujący bład:

console.log

Firefox

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.xxx.com/api/check-register/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.xxx.com/api/check-register/. (Reason: CORS request did not succeed).

Chrome

Access to XMLHttpRequest at 'http://api.xxx.com/api/check-register/' from origin 'http://xxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Natomiast w Network mam:

NET:ERR_FAILED

Siedzę od kilku godzin i już i próbuję metodą prób i błędów ale żadnych rezultatów. Z tego co się dowiedziałem, to przeglądarka blokuje requesty

2 odpowiedzi

+1 głos
odpowiedź 22 sierpnia 2020 przez JAKUBW Nałogowiec (33,470 p.)

Musisz dodać nagłówek Access-Control-Allow-Origin do odpowiedzi w php. Możesz to zrobić w php LUB w apache/nginx.

Poczytaj o nim: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

W php ustawiasz ten nagłówek tak:

header('Access-Control-Allow-Origin: *');

W apache:

Header add Access-Control-Allow-Origin "*"

Zamiast gwiazdki możesz wpisać nazwę twojej domeny z której próbujesz połączyć się z backendem.

Gwiazdka oznacza, że z dowolnej domeny możesz się połączyć.

Przeglądarka może znowu pisać trochę inne błedy o innych nagłówkach jak 'Access-Control-Request-Method' lub 'Access-Control-Request-Headers'. Wtedy ustaw je w analogiczny sposób.

Jeżeli ogólnie nie wiesz po co to jest to polecam przecztać o CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

komentarz 22 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

Dzięki za naprowadzenie. Dodałem nagłówki i jest poprawa ale dalej pluje błędami

->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Header', 'Content-Type, Accept, Authorization');

Teraz wypluwa mi

CORS header ‘Access-Control-Allow-Origin’ missing
CORS request did not succeed

 

komentarz 22 sierpnia 2020 przez JAKUBW Nałogowiec (33,470 p.)
Hej, użyj webtoolsów (zakładka Network) żeby sprawdzić czy na pewno nagłówki się ustawiają na wszystkich odpowiedziach, które wychodzą z serwera
komentarz 22 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)
edycja 23 sierpnia 2020 przez Greeenone

Tutaj jest request wysyłany:

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7,pl;q=0.6
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Accept
	application/json, text/plain, */*
Accept-Encoding
	gzip, deflate
Accept-Language
	pl,en-US;q=0.7,en;q=0.3
Authorization
	Bearer 16|MndRGcIZ3c3CidKrFNM08uAC7BhOsAqVgwyOvNHJeFoReElwo77MKhViiwJrhj0Cf4pUjGNhgTCVbLGV
Connection
	keep-alive
Host
	api.xxx.com
Origin
	http://xxx.com
Referer
	http://xxx.com/login
User-Agent
	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0

Sam serwer nic nie zwraca. W Consol.logu mam cos takiego:

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://api.xxx.com/api/access/” (brakujący nagłówek CORS „Access-Control-Allow-Origin”).

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://api.xxx.com/api/access/” (nieudane żądanie CORS).

A tutaj jeszcze moj CORS:
 

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, application/json, text/plain, Authorization');
    }
}

 

komentarz 23 sierpnia 2020 przez JAKUBW Nałogowiec (33,470 p.)

Nie znam się na php więc nie powiem ci czy to jest dobrze czy nie, ale przejdź do dev toolsów w przeglądarce (CRTL + SHIF + I) -> zakładka network

Zaznacz disable cache (tak dla pewności) oraz preserve log

Następnie zrób coś, aby przeglądarka wysłała request, pojawi się on na liście, wtedy go kliknij i upewnij się, że w sekcji Response headers są nagłówki które chcesz. Przeglądarka może wysyłać oprócz rzeczywistego requestu jeszcze najpierw request z metodą OPTIONS upewnij się, że odpowiedź na niego też zawiera te nagłówki. 

komentarz 23 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

Hej, dziękuje za odpowiedź i pomoc. Koniec końców okazało się, że było to blokowane przez serwer.

Dodanie do .Htaccess następującego kodu rozwiązało problem:

<IfModule mod.headers. c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

Zastanawiam się, czy to prawidłowe rozwiązanie czy takie na odwal typu "Nie przechodzi walidacji danych? To ją usuń" :p

komentarz 24 sierpnia 2020 przez JAKUBW Nałogowiec (33,470 p.)
Według mnie to jest dobre rozwiązanie problemu, tego typu nagłówki powinny być ustawiane w warstwie apache, myślę że jest to w porządku.
0 głosów
odpowiedź 22 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
Tak, przeglądarka blokuje requesty - chodzi o bezpieczeństwo użytkownika. Chodzi o tzw. CORS. Wyobraź sobie sytuację : zalogowałeś się do swojego banku, odpalasz drugą kartę i w tej drugiej karcie jest skrypt js co robi taki mniej więcej strzał AJAX'em pod adres www.nazwabanku.pl/wyslij-kase?odbiorca=Artek&kwota=1000000. W ten sposób pozbywasz się kasy z Twojego konta. Żeby nie było takich akcji wymyślono właśnie takie zabezpieczenia w przeglądarkach. Żeby przeglądarka nie blokowała takiego rządania konieczny jest odpowiedni nagłówek. Warto wygooglować CORS(cross origin resource sharing) i zagłębić temat bardziej.
1
komentarz 22 sierpnia 2020 przez Ehlert Ekspert (212,630 p.)

zalogowałeś się do swojego banku, odpalasz drugą kartę i w tej drugiej karcie

Tutaj trochę popłynąłeś. Skąd druga karta w innej domenie ma mieć ciacho banku?

Przecież cors polega na tym że to serwer do którego strzelasz decyduje z jakich domen może to mieć miejsce.

komentarz 22 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Tutaj trochę popłynąłeś. Skąd druga karta w innej domenie ma mieć ciacho banku?

To jest przykład tylko i ma ilustrować ogólną zasadę działania. Takie szczegóły nie są tu istotne.

Przecież cors polega na tym że to serwer do którego strzelasz decyduje z jakich domen może to mieć miejsce.

No tak i co w związku z tym? 

komentarz 22 sierpnia 2020 przez Ehlert Ekspert (212,630 p.)

No tak i co w związku z tym? 

To, że przykład, który przedstawiłeś nie ma związku z CORSem.

komentarz 22 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
Ma związek - napisałem, że aby nie było tego typu sytuacji jak przedstawiona przeze mnie wymyślono CORS. Innymi słowy zarysowałem autorowi tematu problem który przyczynił się do tego, że powstał CORS.
komentarz 22 sierpnia 2020 przez Ehlert Ekspert (212,630 p.)
Jak dla mnie mało adekwatny przykład. Nie wiadomo skąd to ciacho.
komentarz 22 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
Ciacho możnaby dołączyć gdyby zamiast AJAX'owego strzału użyć znacznika img i w atrybucie src dodać np. www.nazwabanku.pl/wyslij-kase?odbiorca=Artek&kwota=1000000. W takiej sytuacji przeglądarka(gdyby nie CORS) dołączyłaby ciastko i atakujący osiągnąłby swój cel.

Poza tym dla zrozumienia samego problemu nie ma znaczenia czy to AJAX czy element img.

Podobne pytania

+1 głos
0 odpowiedzi 656 wizyt
pytanie zadane 23 sierpnia 2020 w PHP przez Greeenone Pasjonat (16,100 p.)
0 głosów
1 odpowiedź 115 wizyt
pytanie zadane 9 lipca 2020 w PHP przez Greeenone Pasjonat (16,100 p.)
0 głosów
1 odpowiedź 207 wizyt
pytanie zadane 8 sierpnia 2019 w PHP przez kordix Gaduła (3,910 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...