title: React calling a Node.js PUT Lambda function with API Gateway
body: <p>I've been reading through different questions and answers on the site and haven't been able to solve my issue. </p>
  
  <p>I'm trying to create a serverless CRUD App with React using Lambda functions and a DynamoDB database. </p>
  
  <p>I have the GET and POST functions working. I am working on the PUT and DELETE now.</p>
  
  <p>I am using localhost to test.</p>
  
  <p>This is my code calling the lambda, </p>
  
  <pre><code>onSubmit = (event) =&gt; {
          event.preventDefault();
          console.log('onSubmit state', this.state);
  
          const { id, record, album, artist, date, imageUrl } = this.state;
  
          fetch("https://link.execute-api.us-east-1.amazonaws.com/RecordShop/", {
              method: 'PUT',
              headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
              },      
              body: JSON.stringify({records: id, record, album, artist, date, imageUrl})
          });
  
          // this.props.getRecords();
          this.handleClose(); 
  
      }
  </code></pre>
  
  <p>This is my PUT Lambda function</p>
  
  <pre><code>console.log('Loading function');
  let doc = require('dynamodb-doc');
  let db = new doc.DynamoDB();
  
  exports.handler = function(event, context) {
      let item = {
          "id" : event.id,
          "record" : event.record,
          "album" :  event.album,
          "artist" : event.artist,
          "date" : event.date,
          "imageUrl" : event.imageUrl
      };
       let params = {
           TableName: process.env.TABLE_NAME, 
           Item: item
      };
          console.log(params);
      db.putItem(params,function(err,data){
          if (err) console.log(err);
          else console.log(data);
      });
  };
  </code></pre>
  
  <p>With the PUT request, I am able to successfully test it in my Lambda function and have it update the database. I am using Chrome and have seen that it doesn't do CORS so I've installed a Chrome extension that allows it and have set the incoming URLs to localhost. I have also tried Firefox and received the following error, </p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading 
  the remote resource at https://vv2qx5zqb7.execute-api.us-east- 
  1.amazonaws.com/Dev/. (Reason: missing token ‘access-control-allow- 
  origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS 
  preflight channel).[Learn More]"
  </code></pre>
  
  <p>From this, I followed the learn more and saw this,</p>
  
  <p>"The response to the CORS request is missing the required Access-Control-Allow-Origin header, which is used to determine whether or not the resource can be accessed by content operating within the current origin."</p>
  
  <p>So I added the Allow-Origin to my react header code as recommended and it didn't work.</p>
  
  <pre><code>headers: {
              'Accept': 'application/json',
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/json'
          },     
  </code></pre>
  
  <p>In Chrome I'm getting this error,</p>
  
  <pre><code>Access to fetch at 'https://execute-api.us-east- 
  1.amazonaws.com/stagename/' from origin 'http://localhost:3000' has 
  been 
  blocked by CORS policy: Request header field access-control-allow- 
  origin is not allowed by Access-Control-Allow-Headers in preflight 
  response.
  </code></pre>
  
  <p>So I looked and played around with the API Gateway set up and tried enabling a Lambda Proxy integration with my put request and get request with no luck. </p>
  
  <p>I know it's a connection issue between my code call and the API Gateway I'm just not sure what I need to change in the gateway to get it to accept the changes.</p>
  
  <p>If anyone has any ideas I would really appreciate it. </p>