使用 withCredentials 时被 cors 拒绝，设置了访问控制允许凭据和来源

Question

I'm using AWS lambdas and cloudfront to serve a SPA. Now that my lambdas are setting a cookie, I want to include that cookie in the requests I made to the backend (the cookie is HttpOnly and Secure ). Using Axios I set the withCredentials option to true and all my request are now being rejected because CORS. The web app is being served from the main domain, while the backend lambdas are on the usual lambda weird UUID url. The lambdas are returning the proper headers, as you can see in the screenshot: access-control-allow-origin is set to the domain the web-app is being served from and access-control-allow-credentials is true . The screenshot is from the app without the withCredentials option activated, so it is being triggered from the web-app 100% sure. Everything is being served over https with a valid certificate (I want to test this also on localhost, but that is a different story)

This is the error I'm getting on the console. One weird thing is that it claims that Access-Control-Allow-Credentials is set to '' , which is not true

Access to XMLHttpRequest at 'https://p3doiszvgg.execute-api.eu-central-1.amazonaws.com/dev/sessions' 
from origin 'https://pento.danielo.es' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Is there anything missing?

EDIT:

This are the headers that I'm sending. The problem with this headers is that they are obtained without the withCredentials flag, because if I add such flag the only headers I can see are the provisional headers.

:authority: p3doiszvgg.execute-api.eu-central-1.amazonaws.com
:method: POST
:path: /dev/sessions
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en;q=0.9,es-ES;q=0.8,es;q=0.7,en-US;q=0.6
authorization: Bearer the.bearer.token
cache-control: no-cache
content-length: 58
content-type: application/json;charset=UTF-8
origin: https://pento.danielo.es
pragma: no-cache
referer: https://pento.danielo.es/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

Here is a provisional headers screenshot:

The cookie sent by the server looks something like this:

 Set-Cookie: refresh_token=uuid-string-with-letters-numbers; HttpOnly; Secure;

Answer 1

Finally I found the problem and a temporary solution (I'm not very happy with it). The problem was not my lambda response, that was correct and including the required headers, the problem was with the preflight request. Your browser will send a preflight request almost for every CORS request you made, and, while that request was being successful it was missing some headers. This can be very confusing because the request that it is failing is your actual request (that is what the browser flags as failed) but the problem is on the preflight response.

To be fair, the error on the console was already pointing this out:

Response to preflight request doesn't pass access control check

But it is abit buried, easy to miss and the documentation about it is sparse.

The way I fixed it is by adding some extra props to the CORS definition of my serverless template:

  authEcho:
    handler: src/users/me.handler
    events:
      - http:
          path: me
          method: get
          cors:
            origin: https://frontend.domain.es
            allowCredentials: true # <-- this is the key part

It is not clear on the serverless documentation, but those will be merged with the final response, so you don't need to specify everything or all the headers. The only thing I don't like is that I have to hardcode the origin, while on the actual labmda responses I can calculate it dynamically.