google extension and CORS

The CORS error you're experiencing with your Google Chrome extension, even after enabling CORS on API Gateway, is a common issue that developers face. This occurs because the Chrome extension's origin (https://<extension-id>.chromiumapp.org) needs to be explicitly allowed in your API Gateway CORS configuration.

To resolve this issue, you need to take the following steps:

1. In your API Gateway CORS configuration, add the specific Chrome extension origin to the list of allowed origins. This means adding "https://<extension-id>.chromiumapp.org" to the 'Access-Control-Allow-Origin' header.

2. Ensure that your API Gateway CORS configuration includes all necessary HTTP methods (GET, POST, PUT, DELETE, OPTIONS) in the 'Access-Control-Allow-Methods' header.

3. Include any custom headers your extension uses in the 'Access-Control-Allow-Headers' configuration.

4. If your Lambda function is handling the response (in case of Lambda proxy integration), make sure it's also returning the appropriate CORS headers in its response, including:

   • 'Access-Control-Allow-Origin': 'https://<extension-id>.chromiumapp.org'
   • 'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS'
   • 'Access-Control-Allow-Headers': Include any custom headers your extension uses

5. After making these changes, redeploy your API in API Gateway for the changes to take effect.

6. In your Chrome extension code, ensure you're including the necessary headers in your fetch or XMLHttpRequest, particularly the 'Content-Type' header.

If you continue to face issues, double-check all your CORS settings and ensure that the preflight OPTIONS request is being handled correctly by your API Gateway and Lambda function. Remember, CORS is a browser security feature, which is why the request might work in tools like Postman but not in your Chrome extension.

Lastly, if you're using credentials in your request, you'll need to set 'Access-Control-Allow-Credentials' to 'true' in your CORS configuration and in the Lambda response headers.

By following these steps, you should be able to resolve the CORS error and successfully make requests from your Chrome extension to your API Gateway endpoint.
Sources
CORS error while accessing an endpoint in API gateway | AWS re:Post
Requests to API Gateway fail with CORS error if I add headers. | AWS re:Post
API Gateway CORS issue using JS Fetch | AWS re:Post