Błąd CORS: Pole nagłówka żądania Autoryzacja jest niedozwolona przez Kontrolki dostępu-Zezwalaj na zezwalanie na odpowiedź wstępną

Question

Próbuję wysłać żądanie z jednego portu lokalnego do drugiego. Używam angularjs na frontend i węzeł na zapleczu.

Ponieważ jest CORS wniosek, node.js, używam

res.header('Access-Control-Allow-Origin', '*'); 
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH'); 
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); 

aw angularjs pliku usług, używam

return { 
    getValues: $resource(endpoint + '/admin/getvalues', null, { 
     'get': { 
      method: 'GET', 
      headers:{'Authorization':'Bearer'+' '+ $localStorage.token} 
      } 
    }), 
} 

otrzymuję następujący błąd:

Pole nagłówka żądania Autoryzacja jest niedozwolona przez Kontrolki dostępu-Zezwalaj na zezwalanie w odpowiedzi wstępnej.

Proszę pomóc!

Answer 1

Musisz dodać opcje również w dozwolonych nagłówkach. przeglądarka wysyła żądanie inspekcji wstępnej przed wysłaniem pierwotnego żądania. Zobacz poniżej

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 

Od źródła https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

W CORS, o inspekcji wstępnej żądanie metodą opcji zostanie wysłana, tak, że serwer może odpowiedzieć, czy jest to dopuszczalne, aby wysłać wniosek z tych parametrów. Nagłówek Access-Control-Request-Method powiadamia serwer jako część żądania preflight, które po wysłaniu faktycznego żądania zostanie wysłane za pomocą metody żądania POST. Nagłówek Access-Control-Request-Headers powiadamia serwer, że po wysłaniu faktycznego żądania zostanie wysłany z niestandardowymi nagłówkami X-PINGOTHER i Content-Type. Serwer ma teraz możliwość określenia, czy chce przyjąć wniosek w takich okolicznościach.

EDITED

Można tego uniknąć ręcznej konfiguracji za pomocą npmjs.com/package/cors NPM package.I wykorzystali tę metodę również, to jest jasne i proste.

Answer 2

Jeśli nie chcesz zainstalować biblioteki cors, a zamiast tego chcesz naprawić oryginalny kod, innym krokiem, który tracisz, jest to, że Access-Control-Allow-Origin: * jest niepoprawny. Podczas przekazywania tokenów uwierzytelniania (na przykład JWT) musisz jawnie podać każdy adres URL, który wywołuje Twój serwer. Nie możesz użyć "*" podczas wykonywania tokenów uwierzytelniania.

Answer 3

To jest problem API, nie dostaniesz tego błędu, jeśli używasz Postman/Fielder do wysyłania żądań HTTP do API. W przypadku przeglądarek, ze względów bezpieczeństwa, zawsze wysyłają żądanie OPTIONS/preflight do API przed wysłaniem rzeczywistych żądań (GET/POST/PUT/DELETE). W związku z tym, w przypadku, gdy metoda żądania jest opcją, nie tylko musisz dodać "autoryzację" do "Access-Control-Allow-Headers", ale musisz dodać "OPTIONS" do "Access-Control-allow-methods" jako dobrze. To było jak naprawiłem:

if (context.Request.Method == "OPTIONS") 
     { 
      context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); 
      context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); 
      context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); 
      context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" }); 

     }