Istio Request Authentication - getting Cors with result 404

This is my requestauthentication,

apiVersion: security.istio.io/v1beta1
kind: RequestAuthentication
metadata:
  name:prod-authenticator
  namespace: prod
spec:
  selector:
    matchLabels:
      istio: ingressgateway
  jwtRules:
  - issuer: https://securetoken.google.com/<project-id>
    jwksUri: https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com

My AuthorizationPolicy is this,

apiVersion: security.istio.io/v1beta1
kind: AuthorizationPolicy
metadata:
 name:prod-authorized-api
 namespace: prod
spec:
 action: ALLOW
 rules:
 - from:
   - source:
        requestPrincipals: ["*"]

 - to:
    - operation:
        paths: ["/user/ping"]

The below helps me to exlcude the health path (/user/ping) without valid token.

My Virtual Service is

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: user-svc-vs
  namespace: prod
spec:
  hosts:
  - gateway.xxxx.com
  gateways:
  - istio-system/prod-gateway
  http:
  - match:
    - uri:
        prefix: /pop
    route:
    - destination:
        host:user-svc.prod.svc.cluster.local

But when checked i can see that only health api gets 200 rest all are getting 404, when checked the browser i saw that

Access to XMLHttpRequest at 'https://' from origin 'https://<>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In the virtual service i tried to add "corsPolicy" but nothing worked.

sample virutal service tried example is

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
      allowMethods:
      - POST
      - GET
      allowCredentials: false
      allowHeaders:
      - X-Foo-Bar
      maxAge: "24h"

<<the above is not our example but i have copied but i applied with my current env but still no Luck! can any one help, struggling for the whole day on this :)

Solution

CORS pre-flight requests are HTTP OPTIONS requests which are issued by browsers automatically, see this site for details.

Therefore, allow OPTIONS calls in your AuthorizationPolicy to allow pre-flight requests.

- to:
    - operation:
        methods: ["OPTIONS"]