title: ReactJS + AWS API Gateway : No 'Access-Control-Allow-Origin' header is present on the requested resource?
body: <p>This is my first post. I am new to ReactJS and AWS, I keep getting a CORS error when I try to connect my form.js file with an AWS API by using axios.post() function. I have tried every possible thing in the last 3 days, with no luck whatsoever! I don't know what I am doing wrong, I tried enabling CORS in AWS API Gateway, no luck there either. Can someone please help!!</p>
  <p>Here's my form.js code:</p>
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  export default class Form extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: '',
        dob: '',
        major: '',
        univ: '',
        desiredcareer: '',
        typeofopp: '',
        collegestressor: '',
        stresslevel: ''
      };
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleNameChange = this.handleNameChange.bind(this);
      this.handleDOBChange = this.handleDOBChange.bind(this);
      this.handleMajorChange = this.handleMajorChange.bind(this);
      this.handleUnivChange = this.handleUnivChange.bind(this);
      this.handleDesiredCareerChange = this.handleDesiredCareerChange.bind(this);
      this.handleTypeOfOppChange = this.handleTypeOfOppChange.bind(this);
      this.handleCollegeStressorChange = this.handleCollegeStressorChange.bind(this);
      this.handleStressLevelChange = this.handleStressLevelChange.bind(this);
    }
  
    handleNameChange = (event) =&gt; {
      this.setState({
        name: event.target.value
      });
    }
  
    handleDOBChange = (event) =&gt; {
      this.setState({
        dob: event.target.value
      });
    }
  
    handleMajorChange = (event) =&gt; {
      this.setState({
        major: event.target.value
      });
    }
  
    handleUnivChange = (event) =&gt; {
      this.setState({
        univ: event.target.value
      });
    }
  
    handleDesiredCareerChange = (event) =&gt; {
      this.setState({
        desiredcareer: event.target.value
      });
    }
  
    handleTypeOfOppChange = (event) =&gt; {
      this.setState({
        typeofopp: event.target.value
      });
    }
  
    handleCollegeStressorChange = (event) =&gt; {
      this.setState({
        collegestressor: event.target.value
      });
    }
  
    handleStressLevelChange = (event) =&gt; {
      this.setState({
        stresslevel: event.target.value
      });
    }
  
    async handleSubmit(event) {
      event.preventDefault();
      const { name,dob,major,univ,desiredcareer,typeofopp,collegestressor,stresslevel } = this.state;
      await axios.post(
        &quot;https://4hpnc7h0fa.execute-api.us-west-2.amazonaws.com/Test/enterdetails/jujiPutUserDetails&quot;,
        { key1: `${name}`,
          key2: `${dob}`,
          key3: `${major}`,
          key4: `${univ}`,
          key5: `${desiredcareer}`,
          key6: `${typeofopp}`,
          key7: `${collegestressor}`,
          key8: `${stresslevel}`
        }
      );
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;Name:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;name&quot;
              onChange={this.handleNameChange}
              value={this.state.name}
            /&gt;
  
            &lt;label&gt;Date Of Birth (MM/DD/YYYY):&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;dob&quot;
              onChange={this.handleDOBChange}
              value={this.state.dob}
            /&gt;
  
            &lt;label&gt;Major:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;major&quot;
              onChange={this.handleMajorChange}
              value={this.state.major}
            /&gt;
  
            &lt;label&gt;University:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;univ&quot;
              onChange={this.handleUnivChange}
              value={this.state.univ}
            /&gt;
  
            &lt;label&gt;Desired Career Field:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;desiredcareer&quot;
              onChange={this.handleDesiredCareerChange}
              value={this.state.desiredcareer}
            /&gt;
  
            &lt;label&gt;Type Of Opportunity Wanted:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;typeofopp&quot;
              onChange={this.handleTypeOfOppChange}
              value={this.state.typeofopp}
            /&gt;
  
            &lt;label&gt;College Stressor Factor:&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;collegestressor&quot;
              onChange={this.handleCollegeStressorChange}
              value={this.state.collegestressor}
            /&gt;
  
            &lt;label&gt;Stress Level (1-10):&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;stresslevel&quot;
              onChange={this.handleStressLevelChange}
              value={this.state.stresslevel}
            /&gt;
  
            &lt;button type=&quot;submit&quot;&gt;Submit Information&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Errors:</p>
  <pre><code>Access to XMLHttpRequest at 'https://4hpnc7h0fa.execute-api.us-west- 
  2.amazonaws.com/Test/enterdetails/jujiPutUserDetails' from origin 
  'http://localhost:3000' 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.
  
  xhr.js:155 POST https://4hpnc7h0fa.execute-api.us-west- 
  2.amazonaws.com/Test/enterdetails/jujiPutUserDetails net::ERR_FAILED
  
  Uncaught (in promise) Error: Network Error
  at createError (createError.js:17)
  at XMLHttpRequest.handleError (xhr.js:69)
  </code></pre>
  <p>Update:</p>
  <p>Here is my Lambda Function Code:</p>
  <pre><code>const AWS = require('aws-sdk');
  const docClient = new AWS.DynamoDB.DocumentClient({region: &quot;us-west-2&quot;});
  
  exports.handler = (event, context, callback) =&gt; {
      console.log(&quot;Processing...&quot;);
      const params = {
          Item: {
              userID: context.awsRequestId,
              name: JSON.stringify(event.key1),
              dob: JSON.stringify(event.key2),
              major: JSON.stringify(event.key3),
              univ: JSON.stringify(event.key4),
              desiredcareer: JSON.stringify(event.key5),
              typeofopp: JSON.stringify(event.key6),
              collegestressor: JSON.stringify(event.key7),
              stresslevel: JSON.stringify(event.key8)
          },
          TableName: &quot;jujiuseronboarding&quot;
      };
      const response = {
      statusCode: 200,
      headers: {
          'Access-Control-Allow-Origin': 'https://localhost:3000/'
      },
      body: JSON.stringify('Item Added Successfully!'),
    };
      
      docClient.put(params, function(err, data) {
          if(err){
              callback(err, null);
          } else {
              callback(null, data);
          }
      })
  };
  </code></pre>
  <p>Any help will be greatly appreciated! :)</p>