AWS - Cloudfront distribution + API Gateway - 403 Forbidden

Question

I'm trying to serve a API Gateway from a Cloudfront distribution but I'm still getting a 403 response even though deployment has no error.

Calling endpoint via its invoke url from web console works right, expected data is returned.

The distribution also serve a static site from an S3 bucket, but that works perfectly.

The distribution is configured to log to an S3 bucket, but logs are not of help (see below).

Probably I'm missing some configuration, but I really can't tell what nor where.

Cloudformation template

Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Enabled: true
        HttpVersion: http2
        Origins:
          - Id: Bucket
            # ...
          - Id: ApiGateway
            DomainName: !Sub '${ApiGateway.RestApiId}.execute-api.${AWS::Region}.amazonaws.com'
            CustomOriginConfig:
              OriginProtocolPolicy: https-only
              HTTPPort: 80
              HTTPSPort: 443
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          Compress: true
          ViewerProtocolPolicy: allow-all
          TargetOriginId: Bucket
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6   # default CachingOptimized
        CacheBehaviors:
          - PathPattern: /api/*
            TargetOriginId: ApiGateway
            AllowedMethods: [ GET, HEAD, OPTIONS]
            ViewerProtocolPolicy: redirect-to-https
            CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled
          - TargetOriginId: Bucket
            # ...
        Logging:
            # ...

  ApiGateway:
    Type: AWS::ApiGateway::RestApi
    Properties:
      Name: !Sub my-api-gateway-${StageName}

  ApiGatewayExecutionRole:
    Type: AWS::IAM::Role
    Properties:
      RoleName: !Sub ApiGatewayExecutionRole-${StageName}
      ManagedPolicyArns:
        - arn:aws:iam::aws:policy/service-role/AmazonAPIGatewayPushToCloudWatchLogs
      AssumeRolePolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Principal:
              Service:
                - apigateway.amazonaws.com
            Action:
              - sts:AssumeRole

  ApiGatewayExecutionPolicy:
    Type: AWS::IAM::Policy
    DependsOn:
      - GetLatestArtistsExecutionRole
    Properties:
      PolicyName: !Sub ApiGatewayExecutionPolicy-${StageName}
      PolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Action:
              - lambda:InvokeFunction
            Resource: # a lambda ARN
          - Effect: Allow
            Action:
              - lambda:InvokeFunction
            Resource: # a lambda ARN
      Roles:
        - !Ref ApiGatewayExecutionRole

Logs

date	time	x-edge-location	sc-bytes	cs-ip	cs-method	cs(Host)	cs-uri-stem	cs-status	cs(Referer)	cs(User-Agent)	cs-uri-query	cs(Cookie)	x-edge-result-type	x-edge-request-id	x-host-header	cs-protocol	cs-bytes	time-taken	x-forwarded-for	ssl-protocol	ssl-cipher	x-edge-response-result-type	cs-protocol-version	fle-status	fle-encrypted-fields	c-port	time-to-first-byte	x-edge-detailed-result-type	sc-content-type	sc-content-len	sc-range-start	sc-range-end
2023-06-12	08:43:25	PMO50-C1	484	93.56.216.51	GET	0123456789abcd.cloudfront.net	/favicon.ico	403	https://0123456789abcd.cloudfront.net/api/my/endpoint	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	VAvnzOY5Vg5Ra1jg5KeyQ7N986CUXU_ns76vHY_qdBNgMPeEE2p6yg==	0123456789abcd.cloudfront.net	https	423	0.204	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.204	Error	application/xml	-	-	-
2023-06-12	08:43:27	PMO50-C1	417	93.56.216.51	GET	0123456789abcd.cloudfront.net	/api/my/endpoint	403	-	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	XwIBTQDx6c3Oaqq7xkNGrqa6WIpfELU0qbXnXGAKCrKvr9ZmMZmlsg==	0123456789abcd.cloudfront.net	https	206	0.150	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.150	Error	application/json	23	-	-
2023-06-12	08:43:27	PMO50-C1	483	93.56.216.51	GET	0123456789abcd.cloudfront.net	/favicon.ico	403	https://0123456789abcd.cloudfront.net/api/my/endpoint	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	TGCaveojUlFJvx3cprpMpVTdtXPyPm9U2Xgxi4BFfSLhsdDGid9ykA==	0123456789abcd.cloudfront.net	https	34	0.163	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.163	Error	application/xml	-	-	-
2023-06-12	08:43:33	PMO50-C1	416	93.56.216.51	GET	0123456789abcd.cloudfront.net	/api/my/endpoint	403	-	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	nnPavByn3z8KA8f9iM4ams5PW0K6ZJmjX_h_sK1D6wWvnRbRlw72ZA==	0123456789abcd.cloudfront.net	https	40	0.117	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.117	Error	application/json	23	-	-
2023-06-12	08:43:33	PMO50-C1	484	93.56.216.51	GET	0123456789abcd.cloudfront.net	/favicon.ico	403	https://0123456789abcd.cloudfront.net/api/my/endpoint	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	44ITHM9SfJGqEzHycOAkEuiMCFfVApgdV6UL9xXTZ0PLwjklhWokTA==	0123456789abcd.cloudfront.net	https	34	0.175	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.175	Error	application/xml	-	-	-
2023-06-12	08:45:34	FCO50-P2	418	93.56.216.51	GET	0123456789abcd.cloudfront.net	/api/my/endpoint	403	-	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	4crypFQbvDZ2uvu7VzSW_v7AM2b8MzweSHhQYDzk2njxICwW0Q8obw==	0123456789abcd.cloudfront.net	https	455	0.075	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	44736	0.075	Error	application/json	23	-	-
2023-06-12	08:45:34	FCO50-P2	483	93.56.216.51	GET	0123456789abcd.cloudfront.net	/favicon.ico	403	https://0123456789abcd.cloudfront.net/api/my/endpoint	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	TOnok3F9P8-Gi9CM_7GtHtOTmVhkyQPcrJrbwJlui4HUCXRZo-IA4A==	0123456789abcd.cloudfront.net	https	148	0.134	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	44736	0.133	Error	application/xml	-	-	-
2023-06-12	08:45:42	PMO50-C1	483	93.56.216.51	GET	0123456789abcd.cloudfront.net	/favicon.ico	403	https://0123456789abcd.cloudfront.net/api/my/endpoint	Mozilla/5.0%20(X11;%20Linux%20x86_64)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/114.0.0.0%20Safari/537.36	-	-	Error	v--hpkzq7TxOTxgZgku6C8ZTllGu_8OuUdGDfoS-OCMnyp5aYpoT1g==	0123456789abcd.cloudfront.net	https	34	0.180	-	TLSv1.3	TLS_AES_128_GCM_SHA256	Error	HTTP/2.0	-	-	58248	0.180	Error	application/xml	-	-	-

score 0 · Answer 1 · edited Jun 12 '23 at 13:17

0

It looks like you are missing the CORS headers enabled in api gateway.

Try to enable them

ApiGateway:
  Type: AWS::ApiGateway::RestApi
  Properties:
    Name: !Sub my-api-gateway-${StageName}
    EndpointConfiguration:
      Types:
        - REGIONAL
    Cors:
      AllowOrigins:
        - '*' # Replace '*' with the appropriate origin(s) if known
      AllowMethods:
        - GET
        - HEAD
        - OPTIONS
      AllowHeaders:
        - Content-Type
        - X-Amz-Date
        - Authorization
      MaxAge: 300

edited Jun 12 '23 at 13:17

fudo

2,254
4
22
44

answered Jun 12 '23 at 11:23

Saifeddine Rajhi

102
4

there is no `Cors` attribute in the [docs](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-resource-apigateway-restapi.html), are you sure about your code? any resource link? – fudo Jun 12 '23 at 13:16
1

It was missing informations my bad.. It should be in API Gateway V2 the core resource [API GateWay V2](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-apigatewayv2-api-cors.html) You can check this [thread](https://stackoverflow.com/questions/40292888/enable-cors-for-api-gateway-in-cloudformation-template) – Saifeddine Rajhi Jun 12 '23 at 14:44
1

This [tutorial](https://medium.com/@joanisaac.biel/setting-up-cors-and-lambda-proxy-integration-in-aws-api-gateway-using-cloudformation-371312eebcb0) may help also – Saifeddine Rajhi Jun 12 '23 at 14:50

AWS - Cloudfront distribution + API Gateway - 403 Forbidden

Cloudformation template

Logs

1 Answers1