8

I have an AWS API Gateway API with CORS enabled and a custom domain set-up. Direct API access via the execute-api endpoints is working and I get no CORS issues in the browser. Access via the custom domain api.example.com which I also configured, is working in principle, but not in the browser, where I get CORS:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

When setting up the custom domain, API Gateway configures its own CloudFront distribution which is somewhat internal and I do not see how to configure it or if this is even possible, it does not show up in my list of CloudFront distributions, which is expected. From the AWS docs:

The CloudFront distribution created by API Gateway is owned by a region-specific account affiliated with API Gateway

I found these answers https://stackoverflow.com/a/52435619/4556546 and https://stackoverflow.com/a/51463965/4556546 that describe how to solve the problem with a normal CloudFront distribution. I am, however wondering:

  1. Have I missed something in configuring the custom domain and its associated CloudFront distribution?
  2. In what circumstances would I choose the custom domain with its internal CloudFront distribution over running my own CloudFront distribution that I can configure? (I already have a CloudFront distribution that I use for other parts of my app.) Are there pricing implications?
ikkjo
  • 735
  • 1
  • 9
  • 18
  • Were you able to solve your problem? I have the same issue. Thanks. – Larry K Oct 27 '19 at 19:57
  • 4
    @LarryK, part of it was me being stupid. When changing from the API Gateway url https://xxxxxxxxxx.execute-api.region.amazonaws.com/dev/some_endpoint to my custom domain, I forgot to remove the stage, i.e. from https://api.dev.example.com/dev/some_endpoint to https://api.dev.example.com/some_endpoint. This solved my immediate problem and I do not get the CORS issue anymore. – ikkjo Oct 28 '19 at 07:46
  • @LarryK, in the meantime, I also talked to a number of AWS employed solution architects, who, surprisingly, seemed not to know much about the special state of the inbuilt distribution, but all stated that running my own distribution as described in the links was the appropriate way forward. From that, I conclude that there is no way to further customize the out of the box cloudfront distibution. – ikkjo Oct 28 '19 at 07:48
  • @ikkjo so in your dns manager did you use the cloudfront url that aws provided when you created the custom url? Or did you connect directly to the internal api that the api gateway provides. – Pineapple Joe Jan 04 '23 at 22:55

2 Answers2

1

Your suggestion to remove the stage or "/dev" from my new custom domain worked like a charm.

api.example.com/dev/some_endpoint Incorrect
api.example.com/some_endpoint Correct

Hopefully this answer can help anyone else trying to add a custom domaim to AWS API Gateway.

Brandon0050
  • 146
  • 1
  • 9
0

simply removing /dev from the end of my custom domain in my amplify config nailed it! I want to hide under the sheets everytime I see that cors error, in this case I came out on top, thanks!

  • Hi, welcome to SO. Please don't include this as an answer, because 1. it is very comment like, you are thanking someone for the answer as opposed to giving it, 2. the other answer is the same way, but was offered as a definitive answer like 6 months ago -> that'd be the exception to the rule, maybe. Other than that, I hope you enjoy your time on SO! – Shmack Dec 03 '22 at 08:12
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33291470) – Yahor Barkouski Dec 04 '22 at 17:54