A client-side Vue.js application hosted on `https://portal.health-insights.com` receives a `403 Forbidden` error with the message 'User is not authorized to access this resource' when attempting to fetch a user's health report. The application interacts with an Amazon API Gateway REST API secured by a custom Lambda Authorizer. The authorizer has caching enabled with a TTL of 300 seconds and is configured with `method.request.header.Authorization` as the identity source. The authorizer function dynamically builds an IAM policy that sets the `Resource` element to the incoming request's `event.methodArn` (for example, `arn:aws:execute-api:us-east-1:123456789012:apiId/prod/GET/user/profile`). A user successfully logs in and views their profile (`GET /user/profile`), but immediately receives the `403 Forbidden` error when navigating to view their reports page (`GET /user/reports`). How should the developer resolve this issue?
- Modify the Lambda Authorizer to return an IAM policy with a wildcard resource path (such as `arn:aws:execute-api:us-east-1:123456789012:apiId/prod/*/*`) instead of the specific `event.methodArn` value.Answer
- BReplace the Lambda Authorizer with a Cognito User Pool Authorizer and configure API Gateway to dynamically generate IAM policies for each distinct HTTP method.
- CEnable CORS on the API Gateway and add the `Access-Control-Allow-Origin` header to the S3 bucket hosting the client-side application.
- DChange the API Gateway integration type from Lambda Proxy to Lambda Custom integration and format the authorizer's output as a JSON payload containing the statusCode and body keys.