Getting Preflight CORS issue while routing using header

1

I have just started using Istio very recently for our api deployment and it worked fine. Recently we tried using it for canary test routing if a particular header is passed via web browser.

But unfortunately we get CORS preflight errors as below

Access to XMLHttpRequest at ‘https://myapi.com/Form’ from origin ‘https://myui.net’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

when passing the header value used to route the particular subset. “myapi.com” here is the api i have deployed using istio and referred the host in my UI “myui.net”.

I have added CORS policies in the virtual service for both my canary test route using header and normal route without header as below

apiVersion: networkingdotistiodotio/v1alpha3
kind: VirtualService
metadata:
name: {{ .Release.Name }}-myapi-virtualservice
namespace: {{.Values.namespace}}
spec:
hosts:
- {{.Values.host}} # copy of value in the gateway hosts
gateways:
- istio-abc-gateway/istio-abc-gateway # gateway name preceded by namespace
http:

  • match:
    • headers:
      canary: # any value like key value pair. - “canary” is a key.
      exact: “true” # when its “true” it will pick the below destination.
      route:
    • destination:
      host: {{ .Release.Name }}-myapi-service.{{.Values.namespace}}.svc.cluster.local #service-name.namespace.svc.cluster.local
      subset: canary-form-subset
      corsPolicy:
      allowMethods:
      - POST
      - OPTIONS
      - GET
      - PUT
      - PATCH
      - DELETE
      allowOrigins:
      - exact: “*”
      - exact: “localurl”
      - exact: “above api URL”
      - exact: “above UI URL”
      - exact: “uiurl2”
      allowHeaders:
      - authorization
      - content-type
      - Keep-Alive
      - X-CustomHeader
      - canary
  • route:
    • destination:
      host: {{ .Release.Name }}-myapiapi-service.{{.Values.namespace}}.svc.cluster.local #service-name.namespace.svc.cluster.local
      subset: stage-form-subset
      corsPolicy:
      allowMethods:
      - POST
      - OPTIONS
      - GET
      - PUT
      - PATCH
      - DELETE
      allowOrigins:
      - exact: “localurl”
      - exact: “above api URL”
      - exact: “above UI URL”
      - exact: “UiUrl2”
      allowHeaders:
      - authorization
      - content-type
      - Keep-Alive
      - X-CustomHeader

The above code is working fine and no CORS issues when i access the normal route without using the header value. Issue is only when i use the header value to access the canary subset. Why this different behavior even though same policies are added. I am passing header via browser extension “ModHeader” in google chrome. Somebody please us help out here. (URLs are not given since only 4 are allowed in a post.)