使用API​​网关反应调用Node.js PUT Lambda函数

Question

I've been reading through different questions and answers on the site and haven't been able to solve my issue.

I'm trying to create a serverless CRUD App with React using Lambda functions and a DynamoDB database.

I have the GET and POST functions working. I am working on the PUT and DELETE now.

I am using localhost to test.

This is my code calling the lambda,

onSubmit = (event) => {
        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(); 

    }

This is my PUT Lambda function

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);
    });
};

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,

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]"

From this, I followed the learn more and saw this,

"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."

So I added the Allow-Origin to my react header code as recommended and it didn't work.

headers: {
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json'
        },     

In Chrome I'm getting this error,

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.

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.

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.

If anyone has any ideas I would really appreciate it.

Answer 1

You need to attach Access-Control-Allow-Origin in the response from your server. It has no value if attached by the client in the request. Your Lambda response should look like:

{
  statusCode: 200,
  headers: {
    'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
  },
  body: JSON.stringify(data)
}

If Lambda runtime is Node.js 8.10

console.log('Loading function');
let doc = require('dynamodb-doc');
let db = new doc.DynamoDB();

exports.handler = (event) => {

    function formatResponse(data, code) {
      return { 
        statusCode: code,
        headers: {
          'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
        },
        body: JSON.stringify(data)
      }
    }

    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) return formatResponse(err, 400);
      else return formatResponse(data, 200);
    });
};

If Lambda runtime is < Node.js v8.10

console.log('Loading function');
let doc = require('dynamodb-doc');
let db = new doc.DynamoDB();

exports.handler = (event, context, callback) => {

    function formatResponse(data, code) {
      return { 
        statusCode: code,
        headers: {
          'Access-Control-Allow-Origin': 'https://yourdomain.com' // Or use wildard * for testing
        },
        body: JSON.stringify(data)
      }
    }

    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) callback(null, formatResponse(err, 400));
      else callback(null, formatResponse(data, 200));
    });
};