相关疑难解决方法(0)

我无法强迫S3在从桶返回的所有对象上设置CORS头,虽然启用了CORS,因为客户端S3上传工作正常,返回的对象没有CORS头!

我启用的政策是:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

示例对象URL https://s3.amazonaws.com/captionable/meme/test

有谁知道什么是错的？

我需要更改我的 AWS S3 存储桶 CORS 策略以启用将我的 ReactJS 的文件上传到 AWS S3，但我不断收到此 API 响应：

预期 params.CORSConfiguration.CORSRules 是一个数组。

我现在不知所措。任何人都可以帮忙吗？

我的用例很简单，我在 S3 中有静态文件（JS、图像），我想通过 CloudFront CDN 共享到多个源。

我只想GET从 S3 公开允许，我的实际配置如下：

<CORSRule>
    <ID>BucketCORSRules</ID>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
</CORSRule>

一切都运行良好，只是有时"no 'Access-Control-Allow-Origin' header is present"在放置新的 S3 对象时会随机出现错误。

我的问题是关于AllowedHeader.

我已经阅读过应该设置为or的所有地方（这里是 SO，再次是 SO，这里是 AWS），但为什么呢？AllowedHeader*Authorization

此 CORS 配置不应该与没有任何CORS 简单请求的情况AllowedHeader一起使用吗？什么可能导致随机"no 'Access-Control-Allow-Origin' header is present"错误？

该AllowedHeader元素通过标头指定预检请求中允许使用哪些标头Access-Control-Request-Headers。标头中的每个标头名称Access-Control-Request-Headers必须与规则中的相应条目匹配。Amazon S3 将仅发送请求的响应中允许的标头。有关可在 Amazon S3 请求中使用的标头示例列表，请转到Amazon Simple Storage Service API 参考指南中的常见请求标头。

来源：http ://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#cors-allowed-headers

我在应用程序中使用 video.js 插件播放 HLS 视频时遇到问题。我有一个 HLS 视频（.m3u8、.ts）的 S3 存储，并将其连接到 cloudfront。视频在 safari 上可以正常工作，但在 Chrome 上无法正常工作。当我硬重新加载页面（删除缓存、cookies...）时，它们就可以在 chrome 上工作。

我的配置：

视频.JS：

videojs.Hls.xhr.beforeRequest = function (options) {
      options.headers = {
        "Access-Control-Allow-Origin": "*",
      };
      return options;
    };

S3 存储桶 CORS：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "Access-Control-Allow-Origin",
            "Connection",
            "Content-Length"
        ],
        "MaxAgeSeconds": 3000
    }
]

云前：

我想要的是

我正在尝试为class设置背景图像，该图像存储在Amazon s3上，我正在通过Rails上的回形针对象访问该图像

CSS类

.user-area{
    background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

放在浏览器上

.user-area{
    background-image:url('https://xyz-customers.s3.amazonaws.com/photos/7/superbackground.jpg?AWSAccessKeyId=xxxxxxxxxxxxx&Expires=1402511741&Signature=xxxxxxxxxxxxxxxx');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

问题

该图像在浏览器上不可见，但是当我访问Amazon s3 url（在css类上生成）时，我可以查看该图像。

浏览器还会为此文件抛出403错误， is a Failed to load resource: the server responded with a status of 403 (Forbidden)

请注意，这是一个自我回答的问题。

该问题与ToastUI图像编辑器v3.3.0有关，但也可能适用于较新的版本。

使用此官方示例加载图像时：

// Create image editor
var imageEditor = new tui.component.ImageEditor('#my-image-editor canvas', {
    cssMaxWidth: 1000, // Component default value: 1000
    cssMaxHeight: 800  // Component default value: 800
});

// Load image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')

编辑器将不会加载图像。该函数既不抛出也不返回任何指示失败的信息，并且您不会收到任何错误消息。它返回一个诺言，该诺言按照文档中的说明进行解析。

它仅通过在初始配置中指定图像来加载图像，此后您将无法更改它：

// Create image editor
var imageEditor = new tui.component.ImageEditor('#my-image-editor canvas', {
     includeUI: {
         loadImage: {
             path: 'img/sampleImage.jpg',
             name: 'My sample image'
         },
     },
    cssMaxWidth: 1000, // Component default value: 1000
    cssMaxHeight: 800  // Component default value: 800
});

看来loadImageFromURL …