Итак, я создаю контактную форму с ReactJs (внешний интерфейс) и AWS Lambda (NodeJS), DynamoDB для хранения данных и API Gateway для API для публикации.
У меня есть некоторая путаница с моей лямбда-функцией, когда я тестирую в функции AWS Лямбда, она отлично работает, когда я пересекаюсь с таблицей DynamoDB, данные показывают нормально, так что для меня все работает нормально.
Затем, когда я снова создал свою конечную точку API и протестировал в PostMan, я получил 200 OK, и данные отобразились в таблице.
Но если я тестирую на https://resttesttest.com/ Я получаю сообщение об ошибке Oh no! Javascript returned an HTTP 0 error. One common reason this might happen is that you requested a cross-domain resource from a server that did not include the appropriate CORS headers in the response. Better open up your Firebug... Также это происходит, когда я получаю ошибки на веб-интерфейсе с ошибкой:
Access to fetch at 'https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev' from origin 'https://4aac7fcc99274cf38ccbeef575c7edc0.vfs.cloud9.eu-west-2.amazonaws.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Я в замешательстве, любая идея может помочь.
AWS Лямбда-функция / 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;
Я пытался с топором ios и его все та же проблема? Я оставил конечную точку, чтобы ошибка могла быть просмотрена и диагностирована.