Vue.js & Express-gateway CORS request

Question

I have a problem with an HTTP request from a Vue.js component to a server with express gateway. I assume the problem is on Express Gateway because even if the microservice that should receive the request is offline, the error still shows anyway.

The Vue.js code is very simple and is:

await this.$http.post('http://localhost:8080/cartItems/',{
                    user_id: this.userId,
                    product_id: this.productId,
                    quantity: productQuantity,
                },{
                    headers:{
                        'Access-Control-Allow-Origin': '*',
                    }
                }).then(response => {
                    Vue.$toast.open({
                        position: 'bottom-right',
                        type: 'success',
                        duration: 3000,
                        message: '--------',
                    });
                })
                .catch(errors => {
                    Vue.$toast.open({
                        position: 'bottom-right',
                        type: 'error',
                        duration: 3000,
                        message: '--------',
                    });
                });

The error in console is:

Access to XMLHttpRequest at 'http://localhost:8080/cartItems/' from origin 'http://localhost:10000' 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.

The strange thing (strange for me) is that the problem shows up only with POST request but it doesn't with a GET request.

I configured the gateway with cors policy (see below) following the documentation, but I can't figure out what I am doing wrong.

policies:
  - cors

......

pipelines:
  cart:
    apiEndpoints:
      - cart-view-update-delete
      - cart-add
      - cart-my
    policies:
      - cors:
          - action:
              origin: '*'
              methods: ['HEAD','PUT','PATCH','POST','DELETE']
      - proxy:
          - action:
              serviceEndpoint: cart
              changeOrigin: true

Answer 1

Had the same problem, here's the correct option for cors

   - cors:
      - action:
          origin: true
          credentials: true
          methods: 'HEAD,PUT,PATCH,POST,DELETE,GET'
          exposedHeaders : ['allowed-custom-header']
          allowedHeaders :  '*'
          preflightContinue : false
          optionsSuccessStatus  : 204