Cors with httpApi

[esimonetti]

Hello!

I am looking to allow SOME API from SOME domains to complete API requests via ajax, posting data to my API, also passing the cookies.

The front-end is in a subdomain of the same domain, the back-end in a different subdomain.

I have attempted with this: #252 but I had no luck.

Did anyone do this?
If you did, would you mind sharing your solution?

Thank you so much!

[mnapoli]

Hi, are you using a framework for the API? Usually there's documentation for setting up CORS (e.g. Symfony or Laravel).

[esimonetti]

Hey @mnapoli , yes I am using Laravel.

I did try anything I could think of, and any guide I could find.
By checking with curl, it looks like from localhost (with the appropriate changes in settings) for the OPTIONS call, I get back the header "Access-Control-Allow-Headers". While it does not seem to happen from the API gateway, which causes the error. I am stuck to figuring out why.

Any tricks you could think of? A missing setting on serverless.yml?

Then step 2 I'll try to figure out the cookie, which works fine from postman and not from the local environment pairs, and I cannot test that yet on the cloud deployment as CORS prevents me to.

Thanks again for any further hints you could provide!

[esimonetti]

Summary

I've tried many other things. When querying the cloudfront endpoint (serverless->bref->laravel->PHP), I never manage to get the Access-Control-Allow-Headers back, which is configured on config/cors.php. I am posting to an endpoint on another domain, with encrypted cookies storage/sessions.

Details of the configuration and setup

I am using Laravel Framework 9.45.1
Serverless version
Framework Core: 3.24.1
Plugin: 6.2.2
SDK: 4.3.2

Laravel serverless.yml setup:

functions:
    laravel:
        handler: public/index.php
        timeout: 20
        layers:
            - ${bref:layer.php-81-fpm}
        events:
            - httpApi: '*'

This is what my config/cors.php looks like:

    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['GET', 'POST', 'OPTIONS'],
    'allowed_origins' => [
        'https://www-dev.mydomain.com',
        'http://localhost:4000',
        'http://127.0.0.1:4000'
    ],
    'allowed_origins_patterns' => [],
    'allowed_headers' => [
        'Content-Type',
        'X-Requested-With',
        'Cache-Control',
    ],
    'exposed_headers' => [],
    'max_age' => 3600,
    'supports_credentials' => true,

AWS environment

with curl -H "Origin: https://www-dev.mydomain.com" -H "Access-Control-Request-Method: POST" -H "Access-Control-Request-Headers: Content-Type" -X OPTIONS --verbose https://app-dev.mydomain.com/api/myendpoint

I do not get back the header: Access-Control-Allow-Headers

I do get the followings:

< allow: GET,HEAD,POST
< cache-control: no-cache, private
< vary: Access-Control-Request-Method, Origin
< access-control-allow-origin: https://www-dev.mydomain.com
< access-control-allow-credentials: true

Outcome: CORS fails (because of the missing headers)

IF/WHEN I "hack" public/index.php (as explained on few of the tens of links I went through), to force the headers with:

header('Access-Control-Allow-Headers: Content-Type, Cache-Control, X-Requested-With');

I do get the followings:

< access-control-allow-origin: https://www-dev.mydomain.com
< vary: Access-Control-Request-Method, Origin
< access-control-allow-credentials: true
< access-control-allow-headers: Content-Type, Cache-Control, X-Requested-With
< allow: GET,HEAD,POST

Hacky outcome: At which point works both CORS and also the cookies storage works

Local environment

While on the local environment with: curl -H "Origin: http://127.0.0.1:4000" -H "Access-Control-Request-Method: POST" -H "Access-Control-Request-Headers: content-type" -X OPTIONS --verbose http://myhostfiledns.local:8000/api/myendpoint

I do get the header back:

< Access-Control-Allow-Origin: http://127.0.0.1:4000
< Vary: Origin, Access-Control-Request-Method
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: GET, POST, OPTIONS
< Access-Control-Allow-Headers: content-type, x-requested-with, cache-control
< Access-Control-Max-Age: 3600

Outcome: CORS works, cookies don't yet work.

Now my questions are:

1- Why would the cloud deployment ignore Access-Control-Request-Headers set by the cors config? Or is it something else stripping them? Bug somewhere? Misconfiguration somewhere?
2- What else could I try, to have a less "hacky" solution?
3- Why would cookies in the local environment not work? What else could I try?

What am I totally missing?

Thanks heaps!

[esimonetti]

I think I might have understood where the source of the problem is.

If I query the API Gateway URL, I get the CORS headers as configured.
If I query the CloudFront URL, I do not get those.

Apparently, you can create a response headers policy in CloudFront manually, but I do not know how to do that automatically through serverless.yml

The other possibility is: is there a way to tell AWS through serverless's automation to pass through the CORS headers as they are, instead of potentially hardcoding their own in the CloudFront policy?

Any idea?

Thanks!

[esimonetti]

Ok, I think I got it.

There are really 3 ways to implement CORS, and the one I described in the last post is just one of them.
So I am good on that part!

Thanks