How to Fix CORS Issues in AWS API Gateway: Step-by-Step Guide

To fix a CORS (Cross-Origin Resource Sharing) issue in Amazon API Gateway, you need to allow your API to accept requests from other domains. Follow these step-by-step instructions to resolve the CORS issue:

Step-by-Step Solution to Fix CORS in API Gateway:

Step 1: Enable CORS in the API Gateway Console

1. Open the API Gateway Console:
   • Log in to your AWS Management Console and navigate to the API Gateway service.
2. Select Your API:
   • From the list of APIs, select the one you want to enable CORS for.
3. Select the Resource and Method:
   • Go to the Resources section in your API.
   • Click on the specific resource path (e.g., /items) and the method (GET, POST, etc.) for which you want to enable CORS.
4. Enable CORS for the Method:
   • In the method settings, click on Actions and choose Enable CORS.
5. Configure CORS Settings:
   • When you enable CORS, API Gateway will present a dialog box where you can define which HTTP headers, methods, and origins are allowed.
   • Typically, you would allow:
     • Access-Control-Allow-Origin: * (to allow requests from all domains) or specify your domain (e.g., https://example.com).
     • Access-Control-Allow-Headers: Content-Type, Authorization, etc.
     • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, etc.
6. Confirm and Apply Changes:
   • Review the configuration and click Enable CORS and Replace Existing CORS Headers.
   • This step will automatically create a OPTIONS method for the selected resource with the necessary CORS headers.

Step 2: Manually Add CORS Headers (If Needed)

Sometimes, CORS may still not work due to custom backend integrations. If that’s the case, you can manually add CORS headers in the API Gateway method integration response.

1. Go to Method Execution:
   • Under your method (e.g., GET), select Method Execution.
2. Choose Integration Response:
   • Click on Integration Response under Method Execution.
3. Modify Integration Response Headers:
   • For each status code (e.g., 200), expand the status code section.
   • Under Header Mappings, add the following headers:
     • Access-Control-Allow-Origin: '*' or your domain.
     • Access-Control-Allow-Headers: '*' or specific headers you allow (e.g., Content-Type, Authorization).
     • Access-Control-Allow-Methods: Allowed methods like GET, POST, PUT, DELETE.
4. Save Changes:
   • After adding the headers, click Save.

Step 3: Deploy the API

Once you’ve made the necessary changes, you need to deploy your API for the changes to take effect.

1. Deploy the API:
   • In the API Gateway console, click on Actions and choose Deploy API.
2. Select a Deployment Stage:
   • Choose the stage where you want to deploy the API (e.g., dev, prod).
3. Confirm Deployment:
   • Confirm the deployment to update the API with the CORS configurations.

Step 4: Test CORS Configuration

After deploying your API, you should test it to ensure CORS is working correctly.

1. Use a Web Browser Console:
   • Open the developer tools in your browser (right-click -> Inspect -> Console).
   • Try calling the API from a web page hosted on a different domain.
2. Check for CORS Headers:
   • Look at the network requests and responses in the Network tab of the developer tools.
   • Verify that the Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers are present in the response headers.

Additional Notes:

• Browser Caching: Sometimes the browser caches preflight (OPTIONS) requests. Try clearing the cache or using incognito mode to avoid issues related to caching.
• Lambda Integration: If you’re using a Lambda function behind your API, ensure that your Lambda function’s response includes the necessary CORS headers as well.

By following these steps, you should be able to resolve CORS issues in your API Gateway integration.