Dodanie obsługi CORS do serwera proxy interfejsu API

Przeglądasz dokumentację Apigee Edge.
Przejdź do Dokumentacja Apigee X. informacje.

CORS (Udostępnianie zasobów między domenami) to standardowy mechanizm, który umożliwia JavaScript Wywołania XMLHttpRequest (XHR) wykonywane na stronie internetowej w celu interakcji z zasobami spoza źródła domeny. CORS to powszechnie wdrażane rozwiązanie zasady dotyczące tego samego źródła. egzekwowana przez we wszystkich przeglądarkach. Jeśli na przykład wywołujesz XHR do interfejsu Twitter API, korzystając z kodu JavaScript nie zostanie wykonane w przeglądarce, wywołanie zakończy się niepowodzeniem. Dzieje się tak, ponieważ domena wyświetlająca stronę używana przeglądarka różni się od domeny obsługującej interfejs Twitter API. CORS zapewnia rozwiązanie, ten problem, umożliwiając serwerom wyrażenie zgody jeśli chcą udostępniać zasoby z innych domen, udostępnianie.

Film: obejrzyj krótki film, aby dowiedzieć się, jak włączyć CORS na serwerze proxy interfejsu API.

Typowe zastosowanie CORS

Poniższy kod JQuery wywołuje fikcyjną usługę docelową. Jeśli wykonywane są z poziomu w kontekście przeglądarki (strony internetowej), wywołanie zakończy się niepowodzeniem ze względu na zasadę dotyczącą tej samej domeny:

<script>
var url = "http://service.example.com";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This is where we end up!
            }
    });
  });
});
</script>

Jednym z rozwiązań tego problemu jest utworzenie serwera proxy Apigee API, który będzie wywoływać interfejs API usługi jak również zaplecza. Pamiętaj, że Edge znajduje się między klientem (w tym przypadku przeglądarką) a backendem interfejsu API (usługi). Serwer proxy interfejsu API działa na serwerze, a nie w przeglądarce, dlatego ma możliwość wywołania usługi. Teraz wystarczy, że to dołączenie nagłówków CORS do odpowiedzi TargetEndpoint. Jeśli przeglądarka obsługuje CORS, te nagłówki sygnalizują przeglądarce, że można „odprężyć” dla tej samej domeny, co pozwala wywołanie interfejsu API z innych domen, aby odnieść sukces.

Po utworzeniu serwera proxy z obsługą CORS możesz wywołać URL serwera proxy API zamiast zaplecza w kodzie po stronie klienta. Na przykład:

<script>
var url = "http://myorg-test.apigee.net/v1/example";
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        dataType: "json",
           success: function(json) {
              // Parse the response.
              // Do other things.
           },
           error: function(xhr, status, err) {
              // This time, we do not end up here!
            }
    });
  });
});
</script>

Dołączanie zasady dodawania CORS do nowego interfejsu API serwer proxy

Możesz dodać obsługę CORS do serwera proxy interfejsu API, dołączając link „Dodaj CORS” zasady dla serwera proxy API podczas tworzenia. Aby dodać tę zasadę, zaznacz pole wyboru Dodaj nagłówki CORS w stronę Zabezpieczenia w kreatorze Build a Proxy.

Gdy zaznaczysz to pole wyboru, zasada o nazwie Dodaj CORS zostanie automatycznie dodana do systemu i dołączony do wstępnego przepływu odpowiedzi TargetEndpoint, jak na tym ilustracji:

Dodano zasadę CORS do nawigatora w sekcji Zasady i dołączoną do wstępnego przepływu odpowiedzi docelowego punktu końcowego na prawym przesunięciu

Zasada Dodaj CORS jest zaimplementowana jako zasada AssignMessage, która dodaje odpowiednie nagłówki do odpowiedzi. Zasadniczo nagłówki informują przeglądarkę, z jakim źródłem udostępnia ona zasoby, akceptowalne metody itd. Więcej informacji o tych nagłówkach CORS znajdziesz w Zalecenie W3C dotyczące udostępniania zasobów między pochodzeniem.

Należy zmodyfikować tę zasadę w następujący sposób:

  • Dodaj nagłówki content-type i authorization (wymagane do obsługi podstawowego uwierzytelniania lub protokołu OAuth2) do nagłówka Access-Control-Allow-Headers, tak jak w poniższym fragmencie kodu.
  • W przypadku uwierzytelniania OAuth2 może być konieczne wykonanie pewnych czynności w celu skorygowania zachowania niezgodnego z RFC.
  • Do ustawiania nagłówków CORS zalecamy używanie <Set> zamiast <Add>, jak pokazano w poniższym fragmencie. W przypadku używania funkcji <Add>, jeśli nagłówek Access-Control-Allow-Origin już istnieje, pojawi się następujący błąd:

    The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

    Więcej informacji można znaleźć w sekcji Błąd CORS : nagłówek zawiera wiele wartości „*” i „*”, ale tylko jedna z nich jest dozwolona.

<AssignMessage async="false" continueOnError="false" enabled="true" name="add-cors">
    <DisplayName>Add CORS</DisplayName>
    <FaultRules/>
    <Properties/>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">{request.header.origin}</Header>
            <Header name="Access-Control-Allow-Headers">origin, x-requested-with, accept, content-type, authorization</Header>
            <Header name="Access-Control-Max-Age">3628800</Header>
            <Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

Dodawanie nagłówków CORS do istniejącego serwera proxy

Musisz ręcznie utworzyć nową zasadę przypisywania wiadomości i skopiować kod dodawania CORS zasady opisane w poprzedniej sekcji. Następnie dołącz zasadę do wstępnego przepływu odpowiedzi docelowy punkt końcowy serwera proxy interfejsu API. W razie potrzeby możesz zmienić wartości nagłówków. Więcej Więcej informacji na temat tworzenia i dołączania zasad znajdziesz w artykule Co to jest zasada?.

Obsługa CORS żądania wstępne

Proces wstępny CORS oznacza wysyłanie żądania do serwera w celu sprawdzenia, czy obsługuje CORS. Typowe odpowiedzi wstępne obejmują informacje o źródłach, które serwer akceptuje CORS żądania z, listę metod HTTP obsługiwanych w przypadku żądań CORS, nagłówki, które można jest używany w ramach żądania zasobu, maksymalny czas odpowiedzi procesu wstępnego jest przechowywany w pamięci podręcznej, a reszta. Jeśli usługa nie wskazuje obsługi CORS lub nie chce akceptować zasobów z innych domen ze źródła klienta, egzekwowana jest zasada dotycząca różnych domen w przeglądarce, wszystkie wysyłane przez klienta żądania między domenami w celu interakcji z zasobami hostowanymi na tym serwerze. nie powiedzie się.

Zwykle żądania procesu wstępnego CORS są wykonywane za pomocą metody HTTP OPTIONS. Gdy serwer obsługuje CORS odbiera żądanie OPTIONS, zwraca zestaw nagłówków CORS do klienta, który wskazuje poziom obsługi CORS. Dzięki temu uzgadnianiu połączenia klient wie, czym jest mogą żądać od domeny innej niż domena.

Więcej informacji o procesach wstępnych znajdziesz w rekomendacji W3C dotyczącej udostępniania zasobów z różnych domen. Znaleziono w Dodanie wielu blogów i artykułów na temat CORS, do których możesz się odnieść.

Apigee nie obejmuje gotowego rozwiązania procesu wstępnego CORS, ale możliwe jest w sposób opisany w tej sekcji. Celem jest, aby serwer proxy mógł ocenić OPTIONS w procesie warunkowym. Serwer proxy może następnie wysłać odpowiednią odpowiedź do wywołania klienta.

Przyjrzyjmy się przykładowemu przepływowi, a potem omówmy części, które obsługują żądanie procesu wstępnego:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="default">
    <Description/>
    <Flows>
        <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
        </Flow>
    </Flows>

    <PreFlow name="PreFlow">
        <Request/>
        <Response/>

    </PreFlow>
    <HTTPProxyConnection>
        <BasePath>/v1/cnc</BasePath>
        <VirtualHost>default</VirtualHost>
        <VirtualHost>secure</VirtualHost>
    </HTTPProxyConnection>
    <RouteRule name="NoRoute">
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
    </RouteRule>
    <RouteRule name="default">
        <TargetEndpoint>default</TargetEndpoint>
   </RouteRule>
   <PostFlow name="PostFlow">
        <Request/>
        <Response/>
    </PostFlow>
</ProxyEndpoint>

Najważniejsze części tego punktu końcowego serwera proxy są następujące:

  • Tworzona jest reguła RouteRule do celu NULL z warunkiem dla żądania OPTIONS. Pamiętaj, że nie określono docelowego punktu końcowego. Jeśli żądanie OPTIONS zostanie odebrane, a serwer pierwotny i Nagłówki żądań Access-Control-Request-Method nie mają wartości null, serwer proxy natychmiast zwraca nagłówki CORS w odpowiedzi na klienta (z pominięciem rzeczywistego domyślnego miejsca docelowego backendu). Szczegółowe informacje o warunkach przepływu i regule RouteRule znajdziesz w sekcji Warunki ze zmiennymi przepływu.

    <RouteRule name="NoRoute">
    <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
</RouteRule>
  • Zostanie utworzony przepływ OptionPreFlight, który dodaje zasadę dodawania CORS zawierającą CORS nagłówki do przepływu po otrzymaniu żądania OPTIONS, a źródła i Nagłówki żądań Access-Control-Request-Method nie mają wartości null. 

     <Flow name="OptionsPreFlight">
            <Request/>
            <Response>
                <Step>
                    <Name>add-cors</Name>
                </Step>
            </Response>
        <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
 </Flow>

.

Korzystanie z przykładowego rozwiązania CORS

Przykładowe rozwiązanie CORS, wdrożone jako udostępniony przepływ, jest dostępne na GitHub. Zaimportuj pakiet współdzielonego przepływu do swojego środowiska i podłącz go za pomocą punktów zaczepienia przepływu lub bezpośrednio do przepływów serwera proxy interfejsu API. Więcej informacji: Udostępniono plik CORS-Shared-FLow README wraz z przykładem.