CORS 政策已阻止从源“S3_host_url”访问“API_Gateway_URL”获取

Question

我知道以前有人问过这个问题，但我找不到任何可以解决我问题的答案，所以如果重复，请原谅我。

我创建了一个从 DynamoDB 表中读取数据的 Lambda function。 我为这个 Lambda function 创建了一个 API 网关。 当我在浏览器中直接点击 url 时，我得到了预期的结果。 但是，当我在我的 react 应用程序中获取 URL 时，我收到以下错误（我已使用 static 网站托管将我的 react 应用程序托管在 S3 存储桶上）

CORS 策略已阻止从源“S3_static_website_endpoint”获取“API_gateway_url”的访问权限：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”header 存在于请求的资源上。

在搜索 web 时，我发现我需要在我的 Lambda 中设置 'Access-Control-Allow-Origin' header 并且我已经完成了它，但我仍然遇到了同样的问题。

PS：经过一整天的试错并查看不同的答案后，我发布了这个问题，所以如果你知道答案，请帮助我！

Lambda function：

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

反应应用：

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;

Answer 1

我怀疑您的 Lambda 没有针对 OPTIONS 请求（即“预检”）运行。 您可以在 API 网关中配置 CORS 应该可以解决问题。 请参阅为 REST API 资源启用 CORS 。

Answer 2

这已通过使用 cors package 解决。 可以在这里找到实现： https://epsagon.com/blog/aws-lambda-express-getting-started-guide/