ASM'de CORS Uygulama - Alibaba Cloud Service Mesh - Alibaba Cloud Dokümantasyon Merkezi

Bir etki alanındaki istemci, farklı bir etki alanında veya aynı etki alanında ancak istemciden farklı bir bağlantı noktası kullanan bir hizmete eriştiğinde çapraz kökenli bir istek başlatır. Hizmet çapraz kökenli kaynaklara erişime izin vermezse istemci bu hizmete ulaşamaz. Bu durumda web uygulama sunucularının çapraz kökenli kaynaklara erişimi desteklemesini sağlamak için Cross-Origin Resource Sharing (CORS) uygulayabilirsiniz. Bu konuda, Service Mesh (ASM) içinde sanal bir hizmette CORS ilkesi yapılandırarak CORS'un nasıl uygulanacağı açıklanmaktadır.

CORS'a Genel Bakış

Güvenlik nedeniyle tarayıcılar komut dosyalarından başlatılan çapraz kökenli HTTP isteklerini kısıtlar. Çapraz kökenli kaynak erişimi gereksinimlerinizi karşılamak için ASM, CORS uygulamanıza olanak tanır. CORS, HTTP üst bilgilerine dayalı bir mekanizmadır ve bir sunucunun, tarayıcının kendi dışındaki etki alanlarından, protokollerden veya bağlantı noktalarından kaynak yüklenmesine izin vermesini tanımlamasını sağlar.

CORS mekanizması iki tür isteği destekler: basit istekler ve ön denetim istekleri.

Basit istekler

Tarayıcı bir çapraz kökenli istek gönderir. İstekte Origin üst bilgisi belirtilir; bu durum isteğin çapraz kökenli olduğunu gösterir. Hedef sunucu çapraz kökenli isteği aldığında yapılandırılmış CORS kurallarına göre isteğe izin verilip verilmeyeceğini belirler. Yanıt olarak sunucu Access-Control-Allow-Origin ve Access-Control-Allow-Methods üst bilgilerini döndürerek isteğin kabul edilip edilmediğini belirtir.
Ön denetim istekleri

Tarayıcı bir ön denetim isteği gönderir. Bu istek bir HTTP OPTIONS isteğidir ve hedef sunucunun geçerli etki alanından gelen çapraz kökenli isteklere izin verip vermediğini kontrol etmek için kullanılır. Hedef sunucu geçerli etki alanından gelen çapraz kökenli isteklere izin veriyorsa tarayıcı gerçek çapraz kökenli isteği gönderir.

OPTIONS isteği aşağıdaki üst bilgileri içerir: Origin, Access-Control-Request-Method ve Access-Control-Request-Headers. Hedef sunucu OPTIONS isteğini aldıktan sonra yanıtta Access-Control-Allow-Origin, Access-Control-Allow-Method, Access-Control-Allow-Headers ve Access-Control-Max-Age üst bilgilerini belirterek isteğin kabul edilip edilmediğini bildirir. Ön denetim isteğine izin verilirse tarayıcı gerçek çapraz kökenli isteği gönderir.

Bir istek aşağıdaki üç koşulu karşılıyorsa CORS mekanizması bunu basit istek olarak işler. Aksi takdirde istek ön denetim isteği olarak değerlendirilir.

İstek şu yöntemlerden birini kullanır:

GET, HEAD ve POST
İstekteki Content-Type üst bilgisi aşağıdaki değerlerden birine ayarlanır:

text/plain, application/x-www-form-urlencoded ve multipart/form-data
İstek Fetch standardı tarafından tanımlanan aşağıdaki CORS güvenli listesindeki üst bilgilerden birini kullanır:

Accept, Accept-Language, Content-Language ve Content-Type. Content-Type üst bilgisinin değerinin ikinci koşulda listelenen değerlerden biri olması gerektiğini unutmayın.

Sanal Hizmette CORS İlkesi Yapılandırma

Tarayıcılar CORS iletişimini otomatik olarak uygular. Bir hizmete yönelik çapraz kökenli isteklere izin vermek ve CORS iletişimini etkinleştirmek için hizmet için tanımlanan sanal hizmetteki corsPolicy alanını ayarlamanız gerekir.

Sanal hizmet örneğini görüntülemek için genişletin

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: ratings-route
spec:
  hosts:
  - ratings.prod.svc.cluster.local
  http:
  - route:
    - destination:
        host: ratings.prod.svc.cluster.local
        subset: v1
    corsPolicy:
      allowOrigins:
      - exact: https://example.com
      - regex: *     # Regular expressions are supported to specify the addresses of the origins. 
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

Parametre	Açıklama
allowOrigins	Hizmete erişmesine izin verilen kökenlerin adresleri. Normal ifadeler desteklenir. Kimlik bilgisi içermeyen istekler için sunucu bu parametreyi joker karakter (*) olarak ayarlayabilir; böylece tüm kökenlerin hizmete erişmesine izin verilir.
allowMethods	Çapraz kökenli istekleri başlatmak için kullanılabilecek HTTP yöntemleri.
allowHeaders	Gerçek çapraz kökenli istekler sırasında kullanılabilecek üst bilgiler. Belirtilen üst bilgiler ön denetim isteğine verilen yanıtta kullanılan Access-Control-Allow-Headers üst bilgisine seri hale getirilir.
exposeHeaders	Sunucunun tarayıcıların erişmesine izin verdiği üst bilgiler.
maxAge	Tarayıcıların ön denetim isteğine verilen yanıtı önbellekte tutabileceği maksimum süre.
allowCredentials	Çapraz kökenli isteklerin kimlik bilgileriyle yapılıp yapılamayacağını belirtir. Çapraz kökenli istekler yalnızca geçerli kimlik bilgileri kullanılarak gönderilebilir.

CORS İçin En İyi Uygulamalar

Ön Koşullar

Küme ASM örneğine eklendi.
default ve foo ad alanlarını oluşturdunuz ve bunlar için otomatik yan proxy enjeksiyonunu etkinleştirdiniz. Daha fazla bilgi için bkz. Global ad alanlarını yönetme.

Adım 1: Uygulamaları Dağıtma

Arka uç uygulamasını dağıtın.

Kümenin kubeconfig dosyasını edinin ve kubectl kullanarak kümeye bağlanın. Daha fazla bilgi için bkz. Kümenin kubeconfig dosyasını edinme ve kubectl ile kümeye bağlanma.

details.yaml adlı bir dosya oluşturun ve aşağıdaki içeriği dosyaya ekleyin:

details.yaml dosyasını görüntülemek için genişletin

apiVersion: v1
kind: Service
metadata:
  name: details
  labels:
    app: details
    service: details
spec:
  ports:
  - port: 9080
    name: http
  selector:
    app: details
---
apiVersion: v1
kind: ServiceAccount
metadata:
  name: bookinfo-details
  labels:
    account: details
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: details-v1
  labels:
    app: details
    version: v1
spec:
  replicas: 1
  selector:
    matchLabels:
      app: details
      version: v1
  template:
    metadata:
      labels:
        app: details
        version: v1
    spec:
      serviceAccountName: bookinfo-details
      containers:
      - name: details
        image: docker.io/istio/examples-bookinfo-details-v1:1.16.4
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 9080
        securityContext:
          runAsUser: 1000

Aşağıdaki komutu çalıştırarak details uygulamasını default ad alanında dağıtın:
```
kubectl apply -f details.yaml -n default
```

Ön uç uygulamasını dağıtın.

istio-cors-demo.yaml adlı bir dosya oluşturun ve aşağıdaki içeriği dosyaya ekleyin:

istio-cors-demo.yaml dosyasını görüntülemek için genişletin

apiVersion: v1
kind: ServiceAccount
metadata:
  name: istio-cors-demo
---
apiVersion: v1
kind: Service
metadata:
  name: istio-cors-demo
  labels:
    app: istio-cors-demo
    service: istio-cors-demo
spec:
  ports:
    - name: http
      port: 8000
      targetPort: 80
  selector:
    app: istio-cors-demo
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: istio-cors-demo
spec:
  replicas: 1
  selector:
    matchLabels:
      app: istio-cors-demo
      version: v1
  template:
    metadata:
      labels:
        app: istio-cors-demo
        version: v1
    spec:
      serviceAccountName: istio-cors-demo
      containers:
        - image: registry.cn-hangzhou.aliyuncs.com/build-test/istio-cors-demo:v1.0-g8e215f6-aliyun
          imagePullPolicy: IfNotPresent
          name: istio-cors-demo
          ports:
            - containerPort: 80

Aşağıdaki komutu çalıştırarak istio-cors-demo uygulamasını foo ad alanında dağıtın:
```
kubectl apply -f istio-cors-demo.yaml -n foo 
```

Adım 2: Giriş Ağ Geçidi Dağıtma

ASM konsoluna giriş yapın. Sol gezinme bölmesinde Service Mesh > Mesh Management seçeneklerini seçin.
Mesh Management sayfasında ASM örneğinin adına tıklayın. Sol gezinme bölmesinde ASM Gateways > Ingress Gateway seçeneklerini seçin.
Ingress Gateway sayfasında Create seçeneğine tıklayın.
Create sayfasında Name değerini ingressgateway olarak ayarlayın, dağıtım Cluster seçeneğini seçin ve CLB instance type değerini Internet Access olarak ayarlayın. New CLB altında Classic Load Balancer (CLB) örneği için bir teknik özellik seçin. Diğer parametreler için varsayılan değerleri kullanın ve Create seçeneğine tıklayın.
ingressgateway2 adlı bir giriş ağ geçidi oluşturmak için Adım 3 ve Adım 4 tekrarlayın.

Adım 3: Yönlendirme Kuralları Oluşturma

Arka uç uygulaması için bir yönlendirme kuralı oluşturun.
1. Bir Istio ağ geçidi oluşturun ve details uygulamasını ingressgateway ağ geçidiyle ilişkilendirin.
  1. ASM konsoluna giriş yapın. Sol gezinme bölmesinde Service Mesh > Mesh Management seçeneklerini seçin.
  2. Mesh Management sayfasında ASM örneğinin adına tıklayın. Sol gezinme bölmesinde ASM Gateways > Gateway seçeneklerini seçin.
  3. Gateway sayfasında Create from YAML seçeneğine tıklayın.
  4. Create sayfasında Namespaces değerini default olarak ayarlayın. Herhangi bir Scenario Template seçin. YAML düzenleyicisindeki içeriği aşağıdaki yapılandırmayla değiştirin ve Create seçeneğine tıklayın.
    apiVersion: networking.istio.io/v1beta1 kind: Gateway metadata: name: bookinfo-gateway namespace: default spec: selector: istio: ingressgateway servers: - hosts: - '*' port: name: http number: 80 protocol: HTTP
2. Sanal bir hizmet oluşturun.
  1. Ağ ayrıntıları sayfasının sol gezinme bölmesinde Traffic Management Center > VirtualService seçeneklerini seçin. Görüntülenen sayfada Create from YAML seçeneğine tıklayın.
  2. Create sayfasında Namespaces değerini default olarak ayarlayın. Herhangi bir Scenario Template seçin. YAML düzenleyicisindeki içeriği aşağıdaki yapılandırmayla değiştirin ve Create seçeneğine tıklayın.
    apiVersion: networking.istio.io/v1beta1 kind: VirtualService metadata: name: bookinfo namespace: default spec: gateways: - bookinfo-gateway hosts: - '*' http: - match: - uri: prefix: /details route: - destination: host: details port: number: 9080
3. Arka uç uygulamasına erişin.
  1. ingressgateway ağ geçidinin IP adresini edinin. Daha fazla bilgi için bkz. Giriş ağ geçidi oluşturma.
  2. Tarayıcınızın adres çubuğuna http://<ingressgateway ağ geçidinin IP adresi>/details/2 adresini girin.
    {"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
    Yukarıdaki şekilde gösterilen mesaj döndürülürse details arka uç uygulamasına yapılan isteğin başarılı olduğu anlamına gelir.
Ön uç uygulaması için bir yönlendirme kuralı oluşturun.
1. Bir Istio ağ geçidi oluşturun.
  Bir Istio ağ geçidi oluşturun ve istio-cors-demo uygulamasını ingressgateway2 ağ geçidiyle ilişkilendirin.
  1. Ağ ayrıntıları sayfasının sol gezinme bölmesinde ASM Gateways > Gateway seçeneklerini seçin. Gateway sayfasında Create from YAML seçeneğine tıklayın.
  2. Create sayfasında Namespaces değerini foo olarak ayarlayın. Herhangi bir Scenario Template seçin. YAML düzenleyicisindeki içeriği aşağıdaki yapılandırmayla değiştirin ve Create seçeneğine tıklayın.
    apiVersion: networking.istio.io/v1beta1 kind: Gateway metadata: name: istio-cors-demo-gateway namespace: foo spec: selector: istio: ingressgateway2 servers: - hosts: - '*' port: name: http number: 80 protocol: HTTP
2. Sanal bir hizmet oluşturun.
  1. Sol gezinme bölmesinde Traffic Management Center > VirtualService seçeneklerini seçin. VirtualService sayfasında Create from YAML seçeneğine tıklayın.
  2. Create sayfasında Namespaces değerini foo olarak ayarlayın. Herhangi bir Scenario Template seçin. YAML düzenleyicisindeki içeriği aşağıdaki yapılandırmayla değiştirin ve Create seçeneğine tıklayın.
    apiVersion: networking.istio.io/v1beta1 kind: VirtualService metadata: name: istio-cors-demo namespace: foo spec: gateways: - istio-cors-demo-gateway hosts: - '*' http: - route: - destination: host: istio-cors-demo port: number: 8000

Ön uç uygulamasını kullanarak arka uç uygulamasına erişin.

ingressgateway2 ağ geçidinin IP adresini edinin. Daha fazla bilgi için bkz. Giriş ağ geçidi oluşturma.
Google Chrome'un adres çubuğuna http://<ingressgateway2 ağ geçidinin IP adresi> adresini girin.
URL metin kutusuna http://<ingressgateway ağ geçidinin IP adresi>/details/2 adresini girin ve Send seçeneğine tıklayın.

Google Chrome'un sağ üst köşesindeki simgesine tıklayın ve More tools > Developer tools seçeneklerini seçin.

Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
Access to XMLHttpRequest at 'http://47.111.xxx/details/2' from origin 'http://116.62.xxx' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
DevTools failed to load source map: Could not load content for https://unpkg.com/axios/dist/axios.min.map: HTTP error: status code 404,
net::ERR_HTTP_RESPONSE_CODE_FAILURE

Yukarıdaki hata mesajları isteğin başarısız olduğunu gösterir. Bunun nedeni istio-cors-demo ön uç uygulamasının details arka uç uygulamasına erişmek için çapraz kökenli bir istek göndermesidir.

Adım 4: CORS İlkesi Yapılandırma

ASM konsoluna giriş yapın. Sol gezinme bölmesinde Service Mesh > Mesh Management seçeneklerini seçin.
Mesh Management sayfasında ASM örneğinin adına tıklayın. Sol gezinme bölmesinde Traffic Management Center > VirtualService seçeneklerini seçin.
VirtualService sayfasında bookinfo sanal hizmetini bulun ve Actions sütununda View YAML seçeneğine tıklayın.

Edit iletişim kutusunda http parametresinin altına aşağıdaki corsPolicy yapılandırmasını ekleyin ve OK seçeneğine tıklayın.

- corsPolicy:
    allowCredentials: false
    allowMethods:
      - POST
      - GET
    allowOrigins:
      - prefix: 'http://<IP address of the ingressgateway2 gateway>'
    maxAge: 24h

# Final YAML after adding the corsPolicy
http:
    - match:
      - uri:
          prefix: /details
      route:
      - destination:
          host: details
          port:
            number: 9080
      corsPolicy:
        allowCredentials: false
        allowMethods:
          - POST
          - GET
        allowOrigins:
          - prefix: 'http://<IP address of the ingressgateway2 gateway>' # Use the IP of your ingressgateway2 gateway.
        maxAge: 24h

Adım 5: CORS İlkesinin Etkin Olduğunu Doğrulama

Google Chrome'un adres çubuğuna http://<ingressgateway2 ağ geçidinin IP adresi> adresini girin.
URL metin kutusuna http://<ingressgateway ağ geçidinin IP adresi>/details/2 adresini girin ve Send seçeneğine tıklayın.
```
success
{"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
```
Yukarıdaki şekilde gösterilen mesaj döndürülürse istio-cors-demo ön uç uygulaması details arka uç uygulamasına başarıyla erişmiştir. Bu durum CORS ilkesinin etkili olduğunu gösterir.