Cloudfront distribution returning incorrect CORS headers

4

Hi

I have configured my CloudFront distribution (in front of AppSync) to use a custom response header policy:

  • Access-Control-Allow-Credentials: false
  • Access-Control-Allow-Headers: *
  • Access-Control-Allow-Methods: ALL
  • Access-Control-Allow-Origin: *
  • Access-Control-Expose-Headers: *

When I test by making a JS fetch (POST) request from a vue.js method from localhost however, the preflight OPTIONS response does not contain any of the headers above and so the browser prevents the cors request.

What am I missing?

Thanks

Ben

已提问 2 年前3267 查看次数
6 回答
2

Hey, I got the same/similar issue as well.

I am using CF -> HTTP API (JWT Authorizer) -> Lambda

In my Lambda I configured the CORS headers to be sent in the response. This all works fine until I try to use either the CloudFront response header or the API Gateway CORS settings. The headers set in the Lambda code are gone as expected as CF and AG would replace it. BUT the CORS headers configured by CF or AG are missing.

So is there still an issue or do I miss something?

已回答 2 年前
1

I was able to reproduce your problem at the time you wrote it. There was a bug in CloudFront which would have caused it not to return any CORS headers at all if your browser sent the Access-Control-Request-Headers header as part of the OPTIONS request, given the custom headers policy you are using. This bug has now been fixed, so your policy should work as expected.

If you are still having problems, I recommend you open a case with AWS support.

As a workaround, you could use CloudFront Functions to add the headers in response to OPTIONS requests, until the bug above is fixed. You can find an example of how to do this here: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-cors-header-response.html

This could also be done using Lambda@Edge functions, on the Origin Response trigger.

AWS
专家
Paul_L
已回答 2 年前
  • Was this fix rolled out? I'm not having any joy getting CORS to work with cloudfront+appsync Apr 2022, messing with the response policies seems to have no effect. Does it work with the new appsync custom domains?

  • We're having similar issues with CF and our API on EC2. The "override" button for CF CORS policy doesn't behave as expected. When disabled, for example, we get "access-control-allow-credentials: true" from our API. When we enable "Origin override" with Access-Control-Allow-Credentials set to true, the "access-control-allow-credentials" is NOT returned at all. This also happens with the Access-Control-Expose-Headers setting.

1

Hi Ben!

Did you face the response header problem with OTIONS only or other methods also? If possible, could you please share your cache behavior configuration using this managed policies?

Thanks! HaiNT

已回答 2 年前
0

I have also been having an issue with my response policy.

I have set the policy to configure CORS headers but no CORS headers are attached to the response.

I added a custom header and it attaches this header perfectly fine, every response has the custom header.

Surprised this hasn't been solved, its clearly been an issue for several months now.

已回答 2 年前
0

Hi, we still face the same problem on AWS Region EU (Frankfurt).

We use a cloudfront distribution with a response header return policy. The response header return policy is configured with:

  • Access-Control-Allow-Origin: *

Examples:

Does return "Access-Control-Allow-Origin: *"

Does not return "Access-Control-Allow-Origin" Header.

已回答 1 年前
0

Hello,

The peflight request you are making is missing at least the Access-Control-Request-Method request header.

curl -X OPTIONS -H "Origin: http://example.com" -H "Access-Control-Request-Method: POST" --verbose https://<CLOUDFRONT_URL>

profile pictureAWS
专家
achraf
已回答 1 年前

您未登录。 登录 发布回答。

一个好的回答可以清楚地解答问题和提供建设性反馈,并能促进提问者的职业发展。

回答问题的准则