CORS 策略已阻止从源“S3_host_url”获取“API_Gateway_URL”的访问权限答案

【问题标题】：Access to fetch at 'API_Gateway_URL' from origin 'S3_host_url' has been blocked by CORS policyCORS 策略已阻止从源“S3_host_url”获取“API_Gateway_URL”的访问权限
【发布时间】：2020-10-07 09:56:03
【问题描述】：

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

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

访问“API_gateway_url”获取来自原点“S3_static_website_endpoint”的已被阻止通过 CORS 策略：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

在网上搜索时，我发现我需要在我的 Lambda 中设置“Access-Control-Allow-Origin”标头并且我已经完成了，但我仍然遇到了同样的问题。

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

Lambda 函数：

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;

【问题讨论】：

标签： amazon-web-services aws-lambda cors amazon-dynamodb aws-api-gateway

【解决方案1】：

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

【讨论】：

【解决方案2】：

我怀疑您的 Lambda 没有针对 OPTIONS 请求（即“预检”）运行。您可以在 API 网关中配置 CORS，这应该可以解决问题。见Enabling CORS for a REST API resource。

【讨论】：

感谢您的回复，我找到了一种更简单的方法，即使用节点的 cors 包。