Alibaba Cloud Service Mesh:ASM での CORS の実装

ご利用のクラスターの kubeconfig ファイルを取得し、kubectl で接続します。

details.yaml という名前のファイルを作成します。

   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

default 名前空間にアプリケーションをデプロイします。

   kubectl apply -f details.yaml -n default

istio-cors-demo.yaml という名前のファイルを作成します。

   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

foo 名前空間にアプリケーションをデプロイします。

   kubectl apply -f istio-cors-demo.yaml -n foo

details サービスを ingressgateway ゲートウェイに関連付ける Istio ゲートウェイを作成します。

1. ASM インスタンスの詳細ページで、左側のナビゲーションウィンドウで ASM ゲートウェイ > ゲートウェイ を選択します。ゲートウェイ ページで、YAML から作成 をクリックします。

2. 名前空間 ドロップダウンリストで default を選択し、次の YAML を貼り付けて 作成 をクリックします。

   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

バックエンド用の VirtualService を作成します。

1. ASM インスタンスの詳細ページで、左側のナビゲーションウィンドウから [トラフィック管理センター] > [VirtualService] を選択し、[YAML から作成] をクリックします。

2. 名前空間 ドロップダウンリストで default を選択し、次の YAML を貼り付けて 作成 をクリックします。

   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

バックエンドにアクセスできることを確認します。

1. ingressgateway ゲートウェイの IP アドレスを取得します。詳細については、「イングレスゲートウェイの作成」をご参照ください。

2. ブラウザで http://<ingressgateway-ip>/details/2 を開きます。 JSON 応答が表示されれば、バックエンドに到達可能であることが確認できます。

istio-cors-demo サービスを ingressgateway2 ゲートウェイに関連付ける Istio ゲートウェイを作成します。

1. ASM インスタンスの詳細ページで、左側のナビゲーションウィンドウから [ASM ゲートウェイ] > [ゲートウェイ] を選択します。[YAML から作成] をクリックします。

2. 名前空間 ドロップダウンリストで foo を選択し、次の YAML を貼り付けて 作成 をクリックします。

   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

フロントエンド用の VirtualService を作成します。

1. ASM インスタンス詳細ページの左側のナビゲーションウィンドウで、[トラフィック管理センター] > [VirtualService] を選択し、[YAML から作成] をクリックします。

2. 名前空間 ドロップダウンリストで foo を選択し、次の YAML を貼り付けて 作成 をクリックします。

   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

ingressgateway2 ゲートウェイの IP アドレスを取得します。詳細については、「イングレスゲートウェイの作成」をご参照ください。

Google Chrome で http://<ingressgateway2-ip> を開きます。

ページの URL 入力欄に http://<ingressgateway-ip>/details/2 を入力し、送信 をクリックします。

Chrome DevTools を開きます (F12 または その他のツール > デベロッパーツール)。コンソールに CORS エラーが表示されます。ingressgateway2 上のフロントエンドが ingressgateway 上のバックエンドにクロスオリジンリクエストを送信していますが、まだ CORS ポリシーが存在しないためです。