title: Vue & Axios + AWS API Gateway & Lambda - CORS + POST not working
body: <p>I am trying to create an API test function via AWS API Gateway and a Lambda function that is invoked via a Vue app with Axios. It is supposed to send a name and email from input elements. Every time I receive this error:</p>
  <pre><code>Access to XMLHttpRequest at '[API Gateway URL]' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
  </code></pre>
  <p>I have enabled CORS on each step/resource in the API Gateway setup (<a href="https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html" rel="nofollow noreferrer">per this article</a>). Here is the code for the Vue component:</p>
  <pre><code>&lt;template&gt;
  &lt;div data-app&gt;
          &lt;div class=&quot;cell&quot; id=&quot;testForm&quot;&gt;
      {{responseMsg}}
  
         &lt;label&gt;Name&lt;/label&gt;
         &lt;input v-model=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;Name&quot;&gt;
         &lt;label&gt;Email Address&lt;/label&gt;
         &lt;input v-model=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;Email Address&quot;&gt;
         &lt;button v-on:click=&quot;formFunction&quot;&gt;Submit&lt;/button&gt;
     
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  
  export default {
      name: &quot;formtest&quot;,
      data: function () {
          return {name: '',
          email: '',
          responseMsg: 'No response yet!'}
      },
      methods: {
          formFunction: function () {
              const formObj = {
                  name: this.name,
                  email: this.email
              }
              const reqURL = [API gateway URL];
              axios.post(reqURL, formObj)
      .then(response =&gt; {
          console.log(response);
          });
  
          }
      }
  }
  
  &lt;/script&gt;
  </code></pre>
  <p>And here is my Lambda function:</p>
  <pre><code>exports.handler = async (event) =&gt; {
      const resString = 'Hello ' + event.name + &quot;, your email address is &quot; + event.email
  
      const response = {
          statusCode: 200,
           headers: {
              &quot;Access-Control-Allow-Headers&quot; : &quot;Content-Type&quot;,
              &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
              &quot;Access-Control-Allow-Methods&quot;: &quot;OPTIONS,POST,GET&quot;
          },
          body: resString,
      };
      return response;
  };
  </code></pre>
  <p>What could I be doing wrong here?</p>