API proxy'sine CORS desteği ekleme

Apigee Edge belgelerini görüntülüyorsunuz.
Apigee X belgelerine gidin. bilgi

CORS (Merkezler arası kaynak paylaşımı), bir web sayfasında yürütülen JavaScript XMLHttpRequest (XHR) çağrılarının, kaynak olmayan alanlardaki kaynaklarla etkileşim kurmasına olanak tanıyan standart bir mekanizmadır. CORS, tüm tarayıcılar tarafından uygulanan "aynı kaynak politikası" için yaygın olarak uygulanan bir çözümdür. Örneğin, tarayıcınızda yürütülen JavaScript kodundan Twitter API'ye bir XHR çağrısı yaparsanız çağrı başarısız olur. Bunun nedeni, sayfayı tarayıcınıza sunan alan adının, Twitter API'sini sunan alan adıyla aynı olmamasıdır. CORS, sunucuların merkezler arası kaynak paylaşımı sağlamak istemeleri durumunda "etkinleştirmelerine" izin vererek bu soruna bir çözüm sunar.

CORS için tipik kullanım alanı

Aşağıdaki jQuery kodu, kurgusal bir hedef hizmeti çağırır. Bir tarayıcının (web sayfası) bağlamı içinde yürütülürse aynı kaynak politikası nedeniyle çağrı başarısız olur:

<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>

Bu sorunun bir çözümü, arka uçta hizmet API'sini çağıran bir Apigee API proxy'si oluşturmaktır. Edge'in istemci (bu durumda bir tarayıcı) ile arka uç API'si (hizmet) arasında yer aldığını unutmayın. API proxy'si tarayıcıda değil sunucuda yürütüldüğünden hizmeti başarıyla çağırabilir. Ardından, yapmanız gereken tek şey CORS başlıklarını TargetEndpoint yanıtına eklemektir. Tarayıcı CORS'u desteklediği sürece bu başlıklar, tarayıcıya aynı kaynak politikasını "gevşetmesinin" sorun olmayacağını bildirir ve kaynaklar arası API çağrısının başarılı olmasına izin verir.

CORS destekli proxy oluşturulduktan sonra, istemci tarafı kodunuzda arka uç hizmeti yerine API proxy URL'sini çağırabilirsiniz. Örneğin:

<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>

Yeni bir API proxy'sine CORS politikası ekleme

Oluşturduğunuz API proxy'sine "CORS ekle" politikası ekleyerek API proxy'sine CORS desteği ekleyebilirsiniz. Bu politikayı eklemek için Proxy Oluşturma sihirbazının Güvenlik sayfasında CORS başlıkları ekle onay kutusunu işaretleyin.

Bu onay kutusunu işaretlediğinizde, sisteme otomatik olarak CORS ekleme adlı bir politika eklenir ve bu politika, aşağıdaki şekilde gösterildiği gibi TargetEndpoint yanıtı ön akışına eklenir:

CORS politikası ekleme, yanıta uygun başlıkları ekleyen bir AssignMessage politikası olarak uygulanır. Temel olarak, üstbilgiler tarayıcıya kaynaklarını hangi kaynaklarla paylaşacağını, hangi yöntemleri kabul edeceğini vb. bildirir. Bu CORS başlıkları hakkında daha fazla bilgiyi Kaynaklar Arası Kaynak Paylaşımı W3C Önerisi'nde bulabilirsiniz.

Politikayı aşağıdaki şekilde değiştirmelisiniz:

• Aşağıdaki kod alıntısında gösterildiği gibi, content-type ve authorization başlıklarını (temel kimlik doğrulama veya OAuth2'yi desteklemek için gereklidir) Access-Control-Allow-Headers başlığına ekleyin.
• OAuth2 kimlik doğrulaması için RFC'ye uygun olmayan davranışları düzeltmek üzere adımlar atmanız gerekebilir.
• Aşağıdaki alıntıda gösterildiği gibi, CORS başlıklarını ayarlamak için <Add> yerine <Set> kullanmanız önerilir. <Add> kullanılırken Access-Control-Allow-Origin üstbilgisi zaten varsa aşağıdaki hatayı alırsınız:

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

  Daha fazla bilgi için CORS Hatası : Başlık birden fazla değer ("*, *") içeriyor ancak yalnızca bir değere izin veriliyor başlıklı makaleyi inceleyin.

<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>

Mevcut bir proxy'ye CORS başlıkları ekleme

Yeni bir Assign Message (Mesaj Atama) politikası oluşturmanız ve önceki bölümde listelenen Add CORS (CORS Ekleme) politikası kodunu bu politikaya kopyalamanız gerekir. Ardından, politikayı API proxy'sinin TargetEndpoint'inin yanıt öncesi akışına ekleyin. Başlık değerlerini gerektiği gibi değiştirebilirsiniz. Politika oluşturma ve ekleme hakkında daha fazla bilgi için Politika nedir? başlıklı makaleyi inceleyin.

CORS ön kontrolü isteklerini işleme

CORS ön kontrolü, bir sunucunun CORS'u destekleyip desteklemediğini doğrulamak için sunucuya istek gönderme işlemidir. Tipik ön kontrol yanıtları arasında sunucunun hangi kaynaklardan CORS isteklerini kabul edeceği, CORS istekleri için desteklenen HTTP yöntemlerinin listesi, kaynak isteğinin bir parçası olarak kullanılabilecek başlıklar, ön kontrol yanıtının önbelleğe alınacağı maksimum süre ve diğerleri yer alır. Hizmet, CORS desteğini belirtmezse veya istemcinin kaynağındaki çapraz kaynak istekleri kabul etmek istemezse tarayıcının çapraz kaynak politikası uygulanır ve istemciden bu sunucuda barındırılan kaynaklarla etkileşim kurmak için yapılan tüm çapraz kaynak istekler başarısız olur.

Genellikle, CORS ön kontrol istekleri HTTP OPTIONS yöntemiyle yapılır. CORS'u destekleyen bir sunucu bir OPTIONS isteği aldığında, CORS desteğinin düzeyini belirten bir dizi CORS başlığını istemciye döndürür. Bu el sıkışma sonucunda istemci, kaynak olmayan alan adından ne isteyebileceğini bilir.

Ön kontrol hakkında daha fazla bilgi için Cross-Origin Resource Sharing W3C Recommendation (Çapraz Kaynak Kaynak Paylaşımı W3C Önerisi) başlıklı makaleyi inceleyin. Ayrıca, CORS ile ilgili çok sayıda blog ve makale bulunmaktadır.

Apigee, kullanıma hazır bir CORS ön kontrol çözümü içermez ancak bu bölümde açıklandığı gibi uygulanabilir. Amaç, proxy'nin koşullu bir akışta OPTIONS isteğini değerlendirmesidir. Proxy daha sonra istemciye uygun bir yanıt gönderebilir.

Örnek bir akışa bakalım ve ardından ön kontrol isteğini işleyen bölümleri inceleyelim:

<?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>

Bu ProxyEndpoint'in temel bölümleri şunlardır:

• OPTIONS isteği için bir koşul içeren NULL hedefi için bir RouteRule oluşturulur. Hedef uç nokta belirtilmediğini unutmayın. OPTIONS isteği alınırsa ve Origin ile Access-Control-Request-Method istek başlıkları boş değilse proxy, istemciye yanıt olarak CORS başlıklarını hemen döndürür (gerçek varsayılan "arka uç" hedefi atlanır). Akış koşulları ve RouteRule hakkında ayrıntılı bilgi için Akış değişkenli koşullar başlıklı makaleyi inceleyin.
  
  

  <RouteRule name="NoRoute">
      <Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>
  </RouteRule>

• Bir OPTIONS isteği alındığında ve Origin ile Access-Control-Request-Method istek başlıkları boş olmadığında akışa CORS başlıklarını içeren bir CORS politikası ekleyen OptionsPreFlight akışı oluşturulur.
  
  

   <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>

Örnek CORS çözümünü kullanma

Paylaşılan akış olarak uygulanan örnek bir CORS çözümü GitHub'da mevcuttur. Paylaşılan akış paketini ortamınıza aktarın ve akış kancalarını kullanarak veya doğrudan API proxy akışlarına ekleyin. Ayrıntılar için örnekle birlikte verilen CORS-Shared-FLow README dosyasını inceleyin.