Angular [AWS-S3]发布在CORS阻止的预签名URL上，尽管CORS配置启用了它

我想在AWS S3上上传一些媒体

我有两份申请：

• 可以通过AWS SDK直接访问S3的后端
• 需要将一些文件直接上传到S3的前端

事情是这样的：

前端向后端请求一个预先签名的Post url

后端调用S3API以获取URL和一些字段（键、策略等）

前端从后端获取这些URL，并尝试使用适当的表单数据发布请求

我得到这个错误：

https://mydomain.or 已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标题。

这是我的CORS配置：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://mydomain.or",
        ]
    }
]

    this.videoService.presignedPost(this.entity).toPromise().then((uploadData) => { //Where I get my URL and fields

        this.fileInput.url = uploadData.url;

        for (const [key, value] of Object.entries(uploadData.fields)) {
            event.formData.append(key, value)
        }

        this.fileInput.upload();

     });

 createPreSignedPost(entityDb) {
        let today = new Date();
        console.log(entityDb)
        return new Promise((resolve, reject) => {
            var params = {
                Bucket: BUCKET_NAME,
                Fields: {
                    key: my/key/,
                    success_action_status: '201',
                    signature_expiration: (new Date(today.getTime() + 15 * 60000))
                }
            };


     s3.createPresignedPost(params, function (err, data) {
                if (err) {
                    console.error('Presigning post data encountered an error', err);
                    reject(err)
                } else {
                    console.log('The post data is', data);
                    resolve({url: data.url, fields: data.fields})
                }
            });

这是我的预签名帖子的后端代码：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://mydomain.or",
        ]
    }
]

    this.videoService.presignedPost(this.entity).toPromise().then((uploadData) => { //Where I get my URL and fields

        this.fileInput.url = uploadData.url;

        for (const [key, value] of Object.entries(uploadData.fields)) {
            event.formData.append(key, value)
        }

        this.fileInput.upload();

     });

 createPreSignedPost(entityDb) {
        let today = new Date();
        console.log(entityDb)
        return new Promise((resolve, reject) => {
            var params = {
                Bucket: BUCKET_NAME,
                Fields: {
                    key: my/key/,
                    success_action_status: '201',
                    signature_expiration: (new Date(today.getTime() + 15 * 60000))
                }
            };


     s3.createPresignedPost(params, function (err, data) {
                if (err) {
                    console.error('Presigning post data encountered an error', err);
                    reject(err)
                } else {
                    console.log('The post data is', data);
                    resolve({url: data.url, fields: data.fields})
                }
            });

这是我的预签名帖子的后端代码：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://mydomain.or",
        ]
    }
]

    this.videoService.presignedPost(this.entity).toPromise().then((uploadData) => { //Where I get my URL and fields

        this.fileInput.url = uploadData.url;

        for (const [key, value] of Object.entries(uploadData.fields)) {
            event.formData.append(key, value)
        }

        this.fileInput.upload();

     });

 createPreSignedPost(entityDb) {
        let today = new Date();
        console.log(entityDb)
        return new Promise((resolve, reject) => {
            var params = {
                Bucket: BUCKET_NAME,
                Fields: {
                    key: my/key/,
                    success_action_status: '201',
                    signature_expiration: (new Date(today.getTime() + 15 * 60000))
                }
            };


     s3.createPresignedPost(params, function (err, data) {
                if (err) {
                    console.error('Presigning post data encountered an error', err);
                    reject(err)
                } else {
                    console.log('The post data is', data);
                    resolve({url: data.url, fields: data.fields})
                }
            });

我的尝试：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://mydomain.or",
        ]
    }
]

    this.videoService.presignedPost(this.entity).toPromise().then((uploadData) => { //Where I get my URL and fields

        this.fileInput.url = uploadData.url;

        for (const [key, value] of Object.entries(uploadData.fields)) {
            event.formData.append(key, value)
        }

        this.fileInput.upload();

     });

 createPreSignedPost(entityDb) {
        let today = new Date();
        console.log(entityDb)
        return new Promise((resolve, reject) => {
            var params = {
                Bucket: BUCKET_NAME,
                Fields: {
                    key: my/key/,
                    success_action_status: '201',
                    signature_expiration: (new Date(today.getTime() + 15 * 60000))
                }
            };


     s3.createPresignedPost(params, function (err, data) {
                if (err) {
                    console.error('Presigning post data encountered an error', err);
                    reject(err)
                } else {
                    console.log('The post data is', data);
                    resolve({url: data.url, fields: data.fields})
                }
            });

• 邮递员似乎通过了请求，但桶里什么也没有
• 在Chrome不安全的情况下尝试了相同的方法（无集成CORS检查）
• 显示CORS策略并尝试使用curl查看发生了什么

CORS配置是正常的，当我使用curl检查时，我会被阻塞，即使方法和主机在我的CORS配置中是允许的

我错过什么了吗

编辑

---

因此，我检查了被CORS阻止的请求，并在HTTP客户机中使用了完全相同的表单数据、头等。它与客户端配合得很好，但我的应用程序仍然被阻止。

我确信这与以下任何一项有关：

您的JS设置不正确

正如在另一个答案中所建议的，您的CORS配置不正确

我尝试了这个确切的用例（在我的示例中没有CORS），它工作得非常好。为了测试这个用例，我执行了JavaV2示例，该示例生成了一个预签名URL。请参见以下代码示例：

接下来，我使用这个示例生成的URL发布另一个应用程序（通常不允许上传）的数据

答复是200：

---

查看Java示例，确保您已在JS代码中设置了所有设置。

我确信这与以下任一设置有关：

您的JS设置不正确

正如在另一个答案中所建议的，您的CORS配置不正确

我尝试了这个确切的用例（在我的示例中没有CORS），它工作得非常好。为了测试这个用例，我执行了JavaV2示例，该示例生成了一个预签名URL。请参见以下代码示例：

接下来，我使用这个示例生成的URL发布另一个应用程序（通常不允许上传）的数据

答复是200：

---

查看Java示例，确保您已经在JS代码中设置了所有设置。

可能什么都不是，但在“AllowedOriginates”之后有一个无效的逗号：[”https://mydomain.or",]. 在控制台中S3存储桶的CORS字段中，这被标记为无效JSON。

可能为空，但在“AllowedOriginates”之后有一个无效的逗号：[”https://mydomain.or",]. 控制台中S3存储桶的CORS字段中将此标记为无效JSON。

如果删除CORS配置，JS代码是否有效。这将告诉我们问题是CORS还是您使用的JS设置。如果我在我的CORS配置中启用了所有源代码（我显然希望避免），我会得到一个net:CONNECTION_中止。我有，我不明白为什么我尝试什么都不起作用。如果您删除CORS配置，JS代码会起作用吗。这将告诉我们问题是CORS还是您使用的JS设置。如果我在CORS配置中启用了所有源（我显然希望避免），我会得到一个net:CONNECTION_中止。我有，无法理解为什么我尝试的都不起作用。哦，对不起，实际上我在写问题时添加了这个逗号，它不在我的CORS配置中：/噢，对不起，实际上我在写问题时添加了这个逗号，它不在我的CORS配置中：/Hi，谢谢你的详细回答，我检查了应用程序发送的所有参数和表单数据，它在HTTP客户端上运行良好，但在应用程序中仍然不运行（我使用了与我的应用程序发送的请求完全相同的请求，并在S3上禁用了CORS）。我仍然无法从我的应用程序上载任何内容。tho，我得到了网络：连接被中止。我仍然在上面！嗨，谢谢你的详细回答，我检查了应用程序发送的所有参数和表单数据，它在HTTP客户端运行良好，但仍然无法从应用程序中运行（我使用了与我的应用程序发送的请求完全相同的请求，并在S3上禁用了CORS）。我仍然无法从我的应用程序上载任何内容，因为我得到了网络：连接被中止。我仍然在上面！