Я знаю, что этот вопрос задавался ранее, но я не смог найти ответа, который решил мою проблему, поэтому, пожалуйста, простите меня, если он повторяется.
Я создал лямбда-функцию, которая считывает данные из Таблица DynamoDB. Я создал API-шлюз для этой лямбда-функции. Когда я напрямую нажимаю URL-адрес в своем браузере, я получаю ожидаемый результат. Но когда я получаю URL-адрес в своем приложении для реагирования, я получаю следующую ошибку (я разместил свое приложение для реагирования в корзине S3 с хостингом веб-сайтов stati c)
Доступ для получения в ' API_gateway_url 'из источника' S3_static_website_endpoint 'был заблокирован политикой CORS: ответ на предварительный запрос не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.
При поиске в Интернете я обнаружил, что мне нужно установить заголовок 'Access-Control-Allow-Origin' в моей Lambda, и я сделал это, но все равно получаю то же самое проблема.
PS: Я отправляю этот вопрос после целого дня пробной ошибки и смотрю на разные ответы, поэтому, если вы знаете ответ, пожалуйста, помогите мне!
Лямбда-функция:
console.log('function starts');
const AWS = require('aws-sdk');
const dynamoDB = new AWS.DynamoDB.DocumentClient();
exports.handler = (event, context, callback) => {
function formatResponse(data, code) {
return {
statusCode: code,
headers: {
'Access-Control-Allow-Origin': '*',
"Access-Control-Allow-Credentials" : true,
"Access-Control-Allow-Headers":"X-Api-Key"
},
body: JSON.stringify(data)
}
}
let param = {
TableName: 'tableName',
Limit: 100 //maximum result of 100 items
};
//Will scan your entire table in dynamoDB and return results.
dynamoDB.scan(param, function(err,data){
if(err){
return formatResponse(data, 400);
}else{
return formatResponse(data, 200);
}
});
}
Приложение React:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: {}
};
}
async componentDidMount() {
try {
const response = await fetch('API_gateway_url');
let responseJson = await response.json();
this.setState(
{
isLoading: false,
dataSource: responseJson
},
function () { }
);
} catch (error) {
console.error(error);
}
}
render() {
let { dataSource } = this.state;
if (this.state.isLoading) {
return <div>Loading...</div>;
} else {
return (
<div>
{dataSource.Items.map(item => (
<div key={item.PlayerId}>
<h1>{item.PlayerId}</h1>
<li>{item.PlayerName}</li>
<li>{item.PlayerPosition}</li>
<li>{item.PlayerNationality}</li>
</div>
))}
</div>
);
}
}
}
export default App;