Pass allowCredentials directive to method and integration response (#7575)

[ThomasAribart]

What did you implement

Closes #7575

Pass down allowCredentials directive to method and integration responses: Enable browsers to read the request subsequent to the OPTIONS request without having to additionally specify the Access-Control-Allow-Credentials header.

How can we verify it

functions:
  test:
    handler: functions/test.main
    events:
      - http:
          method: get
          path: api/test
          integration: lambda
          cors:
            origin: http://localhost:3000/
            allowCredentials: true

The Access-Control-Allow-Credentials header should be configured in the method and integration responses.

Inside a browser, the same header should be present in the responses, not only to the preflight request but also to the subsequent request.

Todos

Useful Scripts

• npm run test:ci --> Run all validation checks on proposed changes
• npm run lint:updated --> Lint all the updated files
• npm run lint:fix --> Automatically fix lint problems (if possible)
• npm run prettier-check:updated --> Check if updated files adhere to Prettier config
• npm run prettify:updated --> Prettify all the updated files

• Write and run all tests
• Write documentation
• Enable "Allow edits from maintainers" for this PR
• Update the messages below

Is this ready for review?: YES
Is it a breaking change?: NO

[BenEllerby]

@ThomasAribart what cookies does the browser need access to and why?

[ThomasAribart]

@BenEllerby I'm using cross-domain authenticated HTTP requests from a client (front-end) to a private API, with an authentication bearer token provided in the Authorization header (no cookie).

It is not the cookie but the request response that is blocked from the browser:

"When a request's credentials mode is include, browsers will only expose the response to frontend JavaScript code if the Access-Control-Allow-Credentials value is true.

For a CORS request with credentials, in order for browsers to expose the response to frontend JavaScript code, both the server (using the Access-Control-Allow-Credentials header) and the client (by setting the credentials mode for the XHR, Fetch, or Ajax request) must indicate that they’re opting in to including credentials."

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials

[medikoo]

@ThomasAribart thanks for this fix! Please minor suggestions I proposed, and we'll be happy to take it

[medikoo]

Let's use plain JavaScript, and literally assign "true", as it's a boolean value

integrationResponseHeaders['Access-Control-Allow-Credentials'] = "true"

[medikoo]

Additionally it'll be good to have some regression test, or even integration test.

e.g. we have one that confirms on CORS in HTTP API integration:

serverless/tests/integration-all/http-api/tests.js

Lines 155 to 164 in 2e56dea

	it('should support CORS when indicated', async () => {
	const testEndpoint = `${endpoint}/bar/whatever`;
	const response = await fetch(testEndpoint, {
	method: 'GET',
	headers: { Origin: 'https://serverless.com' },
	});
	expect(response.headers.get('access-control-allow-origin')).to.equal('*');
	expect(response.headers.get('access-control-expose-headers')).to.equal('x-foo');
	});

We may add similar one when testing API Gateway: https://github.com/serverless/serverless/blob/2e56dea5652540cf5d82c9d35a999c8c921fa020/tests/integration-all/api-gateway/tests.js

[ThomasAribart]

Thanks @medikoo I took your feedbacks ! Let me know if it's okay for you 👍

[medikoo]

@ThomasAribart great thanks for update! We're nearly there, please see my few style improvement suggestions

[medikoo]

Let's use plain JS as:

integrationResponseHeaders['Access-Control-Allow-Credentials'] = 'true'

[medikoo]

Same here

[medikoo]

While by spec, any value makes it truthy, let's setup header without quotes so 'true' and not "'true'"

[ThomasAribart]

@medikoo Done 👌

[medikoo]

Thank you @ThomasAribart !