Implementar CORS en ASM - Alibaba Cloud Service Mesh - Centro de documentación de Alibaba Cloud

Cuando un cliente de un dominio accede a un servicio en otro dominio distinto, o a un servicio del mismo dominio pero con un puerto diferente al del cliente, el cliente inicia una solicitud de origen cruzado. Si el servicio no permite el acceso a recursos de origen cruzado, el cliente no podrá acceder a él. En este caso, puede implementar el intercambio de recursos de origen cruzado (CORS) para que los servidores de aplicaciones web admitan este tipo de acceso. Este tema describe cómo configurar una política CORS en un servicio virtual de Service Mesh (ASM) para implementar CORS.

Descripción general de CORS

Por motivos de seguridad, los navegadores restringen las solicitudes HTTP de origen cruzado que se inician desde scripts. Para cumplir con sus requisitos de acceso a recursos de origen cruzado, ASM le permite implementar CORS. Este mecanismo se basa en encabezados HTTP y permite que un servidor identifique dominios, protocolos o puertos distintos a los suyos desde los cuales un navegador tiene permitido cargar recursos.

El mecanismo CORS admite dos tipos de solicitudes: simples y de verificación previa (preflight).

Solicitudes simples

Un navegador envía una solicitud de origen cruzado. La solicitud incluye el encabezado Origin, lo cual indica que es de origen cruzado. Cuando el servidor de destino recibe la solicitud, determina si la permite según las reglas CORS configuradas. Como respuesta, el servidor devuelve los encabezados Access-Control-Allow-Origin y Access-Control-Allow-Methods para indicar si la solicitud está permitida.
Solicitudes de verificación previa

Un navegador envía una solicitud de verificación previa. Esta solicitud es de tipo HTTP OPTIONS y sirve para comprobar si el servidor de destino permite solicitudes de origen cruzado desde el dominio actual. Si el servidor de destino las permite, el navegador envía la solicitud de origen cruzado real.

La solicitud OPTIONS contiene los siguientes encabezados: Origin, Access-Control-Request-Method y Access-Control-Request-Headers. Una vez que el servidor de destino recibe la solicitud OPTIONS, especifica los encabezados Access-Control-Allow-Origin, Access-Control-Allow-Method, Access-Control-Allow-Headers y Access-Control-Max-Age en la respuesta para indicar si la solicitud está permitida. Si se permite la solicitud de verificación previa, el navegador envía la solicitud de origen cruzado real.

Si una solicitud cumple con los tres requisitos a continuación, el mecanismo CORS la procesa como una solicitud simple. De lo contrario, la procesa como una solicitud de verificación previa.

La solicitud utiliza uno de los siguientes métodos:

GET, HEAD y POST
El encabezado Content-Type de la solicitud tiene uno de los siguientes valores:

text/plain, application/x-www-form-urlencoded y multipart/form-data
La solicitud utiliza uno de los siguientes encabezados incluidos en la lista segura de CORS, definidos por el estándar Fetch:

Accept, Accept-Language, Content-Language y Content-Type. Tenga en cuenta que el valor del encabezado Content-Type debe ser uno de los indicados en el segundo requisito.

Configurar una política CORS en un servicio virtual

Los navegadores implementan automáticamente la comunicación CORS. Para permitir las solicitudes de origen cruzado dirigidas a un servicio e implementar esta comunicación, debe establecer el campo corsPolicy en el servicio virtual definido para dicho servicio.

Expanda para consultar el ejemplo de servicio virtual

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"

Parámetro	Descripción
allowOrigins	Las direcciones de los orígenes que tienen permitido acceder al servicio. Se admiten expresiones regulares. Para las solicitudes sin credenciales, el servidor puede establecer este parámetro con un comodín (*) para que todos los orígenes puedan acceder al servicio.
allowMethods	Los métodos HTTP que se pueden utilizar para iniciar solicitudes de origen cruzado.
allowHeaders	Los encabezados que se pueden usar durante las solicitudes de origen cruzado reales. Los encabezados especificados se serializan en el encabezado Access-Control-Allow-Headers, el cual se usa en la respuesta a una solicitud de verificación previa.
exposeHeaders	Los encabezados a los que el servidor permite acceder a los navegadores.
maxAge	El tiempo máximo durante el cual los navegadores pueden almacenar en caché la respuesta a una solicitud de verificación previa.
allowCredentials	Especifica si las solicitudes de origen cruzado se pueden enviar con credenciales. Solo se pueden usar credenciales válidas para enviar solicitudes de origen cruzado.

Mejores prácticas para CORS

Requisitos previos

The cluster is added to the ASM instance.
Creó los espacios de nombres default y foo, y habilitó la inyección automática de proxy sidecar para ellos. Para obtener más información, consulte Manage global namespaces.

Paso 1: Desplegar aplicaciones

Despliegue una aplicación de backend.

Obtenga el archivo kubeconfig del clúster y use kubectl para conectarse a él. Para obtener más información, consulte Obtain the kubeconfig file of a cluster and use kubectl to connect to the cluster.

Cree un archivo llamado details.yaml y agregue el siguiente contenido:

Expanda para consultar el archivo 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

Ejecute el siguiente comando para desplegar la aplicación details en el espacio de nombres default:
```
kubectl apply -f details.yaml -n default
```

Despliegue una aplicación de frontend.

Cree un archivo llamado istio-cors-demo.yaml y agregue el siguiente contenido:

Expanda para consultar el archivo 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

Ejecute el siguiente comando para desplegar la aplicación istio-cors-demo en el espacio de nombres foo:
```
kubectl apply -f istio-cors-demo.yaml -n foo 
```

Paso 2: Desplegar una puerta de enlace de entrada

Inicie sesión en la consola de ASM. En el panel de navegación izquierdo, elija Service Mesh > Mesh Management.
En la página Mesh Management, haga clic en el nombre de la instancia de ASM. En el panel de navegación izquierdo, elija ASM Gateways > Ingress Gateway.
En la página Ingress Gateway, haga clic en Create.
En la página Create, establezca Name como ingressgateway, seleccione el Cluster de despliegue y establezca CLB instance type en Internet Access. En la sección New CLB, seleccione una especificación para la instancia de Classic Load Balancer (CLB). Mantenga los valores predeterminados para los demás parámetros y haga clic en Create.
Repita el paso 3 y el paso 4 para crear una puerta de enlace de entrada llamada ingressgateway2.

Paso 3: Crear reglas de enrutamiento

Cree una regla de enrutamiento para la aplicación de backend.
1. Cree una puerta de enlace de Istio y asocie la aplicación details con la puerta de enlace ingressgateway.
  1. Inicie sesión en la consola de ASM. En el panel de navegación izquierdo, elija Service Mesh > Mesh Management.
  2. En la página Mesh Management, haga clic en el nombre de la instancia de ASM. En el panel de navegación izquierdo, elija ASM Gateways > Gateway.
  3. En la página Gateway, haga clic en Create from YAML.
  4. En la página Create, establezca Namespaces en default. Seleccione cualquier Scenario Template. Reemplace el contenido del editor YAML con la siguiente configuración y haga clic en Create.
    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. Cree un servicio virtual.
  1. En el panel de navegación izquierdo de la página de detalles de la malla, elija Traffic Management Center > VirtualService. En la página que aparece, haga clic en Create from YAML.
  2. En la página Create, establezca Namespaces en default. Seleccione cualquier Scenario Template. Reemplace el contenido del editor YAML con la siguiente configuración y haga clic en Create.
    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. Acceda a la aplicación de backend.
  1. Obtenga la dirección IP de la puerta de enlace ingressgateway. Para obtener más información, consulte Create an ingress gateway.
  2. En la barra de direcciones de su navegador, introduzca http://<dirección IP de la puerta de enlace ingressgateway>/details/2.
    {"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
    Si se devuelve el mensaje de la figura anterior, significa que la solicitud a la aplicación de backend details se completó correctamente.
Cree una regla de enrutamiento para la aplicación de frontend.
1. Cree una puerta de enlace de Istio.
  Cree una puerta de enlace de Istio y asocie la aplicación istio-cors-demo con la puerta de enlace ingressgateway2.
  1. En el panel de navegación izquierdo de la página de detalles de la malla, elija ASM Gateways > Gateway. En la página Gateway, haga clic en Create from YAML.
  2. En la página Create, establezca Namespaces en foo. Seleccione cualquier Scenario Template. Reemplace el contenido del editor YAML con la siguiente configuración y haga clic en Create.
    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. Cree un servicio virtual.
  1. En el panel de navegación izquierdo, elija Traffic Management Center > VirtualService. En la página VirtualService, haga clic en Create from YAML.
  2. En la página Create, establezca Namespaces en foo. Seleccione cualquier Scenario Template. Reemplace el contenido del editor YAML con la siguiente configuración y haga clic en Create.
    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

Acceda a la aplicación de backend mediante la aplicación de frontend.

Obtenga la dirección IP de la puerta de enlace ingressgateway2. Para obtener más información, consulte Create an ingress gateway.
En la barra de direcciones de Google Chrome, introduzca http://<dirección IP de la puerta de enlace ingressgateway2>.
En el cuadro de texto URL, introduzca http://<dirección IP de la puerta de enlace ingressgateway>/details/2 y haga clic en Send.

En la esquina superior derecha de Google Chrome, haga clic en el icono y elija More tools > Developer tools.

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

Los mensajes de error anteriores indican que la solicitud falló. Esto ocurre porque la aplicación de frontend istio-cors-demo envía una solicitud de origen cruzado para acceder a la aplicación de backend details.

Paso 4: Configurar una política CORS

Inicie sesión en la consola de ASM. En el panel de navegación izquierdo, elija Service Mesh > Mesh Management.
En la página Mesh Management, haga clic en el nombre de la instancia de ASM. En el panel de navegación izquierdo, elija Traffic Management Center > VirtualService.
En la página VirtualService, busque el servicio virtual bookinfo y haga clic en View YAML en la columna Actions.

En el cuadro de diálogo Edit, agregue la siguiente configuración de corsPolicy debajo del parámetro http y haga clic en OK.

- 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

Paso 5: Comprobar que la política CORS surte efecto

En la barra de direcciones de Google Chrome, introduzca http://<dirección IP de la puerta de enlace ingressgateway2>.
En el cuadro de texto URL, introduzca http://<dirección IP de la puerta de enlace ingressgateway>/details/2 y haga clic en Send.
```
success
{"id":2,"author":"William Shakespeare","year":1595,"type":"paperback","pages":200,"publisher":"PublisherA","language":"English","ISBN-10":"1234567890","ISBN-13":"123-1234567890"}
```
Si se devuelve el mensaje de la figura anterior, la aplicación de frontend istio-cors-demo accedió correctamente a la aplicación de backend details. Esto indica que la política CORS surtió efecto.