Node.js CORS与AWS Lambda、DynamoDB、API网关和React存在混淆

因此，我正在与ReactJs（前端）和AWS Lambda（NodeJS）、DynamoDB构建一个联系表单，以存储数据和API网关，供API发布到

我对Lambda函数有一些混淆，当我在AWS Lambda函数中测试时，它工作正常。当我与DynamoDB表交叉检查时，数据显示良好，因此对我来说，它工作正常

接下来，当我创建了API端点并再次在PostMan中测试时，我得到了200 OK，数据显示在表中

但是如果我在上测试，我会得到一个关于

的错误，哦，不！Javascript返回HTTP 0错误。发生这种情况的一个常见原因是，您从响应中不包含相应CORS头的服务器请求了跨域资源。最好打开你的Firebug…

同样是这样，因为我在前端遇到错误，错误如下：

在获取时访问'https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev“起源”https://4aac7fcc99274cf38ccbeef575c7edc0.vfs.cloud9.eu-west-2.amazonaws.com'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的服务器上不存在'access control Allow Origin'标头资源。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。

我有点困惑，任何想法都可能有用

AWS Lambda函数/NodeJS

var AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region: "eu-west-2"});

exports.handler = (event, context, callback) => {
    console.log("Processing...");
    const params = {
        Item: {
            id: Date.now(),
            message: event.message,
            email: event.email
        },
        TableName: "primaryTable"
    };
    const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify('Hello from Lambda function'),
  };

    docClient.put(params, function(err, data) {
        if(err){
            callback(err, null);
        } else {
            callback(null, data);
        }
    });
};

反应成分

import React, { Component } from 'react';

class Contact extends Component {
 constructor(props) {
    super(props);
    this.state = {
    message: '',
    email: ''
    };
  }

handleSubmit(e) {
    e.preventDefault();
  /*global fetch */
    fetch('https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      }).then(
        (response) => (response.json())
       ).then((response)=>{
      if (response.status === 'success'){
        alert("Message Sent."); 
        this.resetForm();
      }else if(response.status === 'fail'){
        alert("Message failed to send.");
      }
    });
  }

  onEmailChange(event) {
    this.setState({email: event.target.value});
  }

  onMessageChange(event) {
    this.setState({message: event.target.value});
  }


  render() {
    return (
      <div className="container mt-5">
      <h3>Contact</h3>
      <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
    <div className="form-group mt-4">
        <label htmlFor="exampleInputEmail1">Email address</label>
        <input type="email" className="form-control" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
    </div>
    <div className="form-group">
        <label htmlFor="message">Message</label>
        <textarea className="form-control" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
    </div>
    <button type="submit" className="btn btn-primary">Submit</button>
    </form>
      </div>
    );
  }
}

  export default Contact;

import React，{Component}来自'React'；
类接触扩展组件{
建造师（道具）{
超级（道具）；
此.state={
消息：“”，
电子邮件：“”
};
}
handleSubmit（e）{
e、 预防默认值（）；
/*全局提取*/
取（'https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
方法：“张贴”，
正文：JSON.stringify（this.state），
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
}).那么(
（response）=>（response.json（））
)。然后（（响应）=>{
如果（response.status==“success”）{
警报（“已发送消息”）；
这是resetForm（）；
}else if（response.status===“fail”）{
警报（“消息发送失败”）；
}
});
}
onEmailChange（事件）{
this.setState（{email:event.target.value}）；
}
onMessageChange（事件）{
this.setState（{message:event.target.value}）；
}
render（）{
返回(
接触
电子邮件地址
消息
提交
);
}
}
导出默认联系人；

---

我试过Axios，但还是一样的问题？我将端点保留在中，以便可以查看和诊断错误

Postman使用curl，CORS仅用于浏览器。您需要在api网关和lambda函数中白名单域

Postman使用curl，CORS仅用于浏览器。您需要在api网关和lambda函数中白名单域

谢谢，我已经在api网关中通过启用CORS@Sole很高兴听到它起作用了。确保你不允许所有人进入你的CORS。最佳实践是定义可以访问api的特定域。谢谢，我现在在api网关中通过启用CORS@Sole很高兴听到它起作用了。确保你不允许所有人进入你的CORS。最佳实践是定义可以访问api的特定域。