title: Fix CORS "Response to preflight..." header not present with AWS API gateway and amplify
body: <p>I've been struggling so long with the error below. I've tried so many tutorials and stackoverflow answers and none of the solutions fixes my problem. </p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at
    '<a href="https://xxx" rel="noreferrer">https://xxx</a>' from origin
    '<a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>' has been blocked by CORS policy: Response to
    preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource.</p>
  </blockquote>
  
  <p>I'm using SAM serverless to create my api. </p>
  
  <p><strong>template.yaml:</strong></p>
  
  <pre><code>Globals:
    Function:
      Timeout: 10
    Api:
      Cors:
        AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
        AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
        AllowOrigin: "'*'"
  </code></pre>
  
  <p><strong>My lambda function:</strong>
  Both my GET response and OPTIONS response has the following headers that is returned:</p>
  
  <pre><code>headers: {
    "Access-Control-Allow-Headers": "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'",
    "Access-Control-Allow-Origin": "'*'",
    "Access-Control-Allow-Methods": "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
  }
  </code></pre>
  
  <p><strong>My API get in my ReactJs application using amplify:</strong></p>
  
  <pre><code>API.get(apiName, path, {
     headers: {
        "Access-Control-Allow-Origin": "*",
        // "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with",
        // "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE",
        // 'Content-Type': 'application/json'
     }
  })
  </code></pre>
  
  <p>I have tried every combination of Access-Control-Allow-Headers, Access-Control-Allow-Methods in my template.yaml, my lambda function and my reactJs project.</p>
  
  <p>Here is what my result is when I call options in postman on my API endpoint. Thus I do get the correct headers back so per my understanding my API is allowing CORS.
  <a href="https://i.stack.imgur.com/vOPuD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vOPuD.png" alt="enter image description here"></a></p>