aws s3跨域访问问题分析定位

问题描述

公司把图片存储从七牛云迁移到aws s3，图片迁移完成后，在网站获取图片资源的时候，报错，提示跨域存在问题。提示语见下：
Access to Image at ‘’ from origin '’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘*’ is therefore not allowed access.

分析定位

由于也是第一次使用s3，对相关的规则不熟悉，走了很多弯路，前后端尝试了各种解决跨域的办法，后面通过查找CORS，找到了答案。CORS是什么呢？来看一下解释，跨域资源共享 (Cross-origin resource sharings)，知道它的概念，就知道了跨域需要用它来配置处理，接下来，让我们找一下s3里面的s3 CORS的配置。配置路径：s3->存储桶->权限->CORS配置，我们可以在这里编辑跨域访问s3资源的规则，默认时没有配置的。配置见下图：
配置完成后，问题解决，这是设置的是允许来自所有源的跨源请求，不做限制。

CORS配置

什么是CORS？Cross-origin resource sharings。下面来对CORS的配置做一下简单的讲解。
下面看一下我的配置，配置文件：

    *
    GET

* 允许来自所有源的跨源，* 通配符将引用所有源，可以根据实际需要进行配置，例如：http://www.example1.com，允许来自于http://www.example1.com的请求访问s3。
GET 允许跨源 GET，你可以根据需要配置PUT、POST 和 DELETE 请求，例如：

PUT 
POST 
DELETE

下面针对配置具体描述一下：

AllowedMethod 元素

在 CORS 配置中，您可以为 AllowedMethod 元素指定以下值。

• GET
• PUT
• POST
• DELETE
• HEAD
  AllowedOrigin 元素

在 AllowedOrigin 元素中，可指定您希望允许从中发送跨源请求的源，例如 http://www.example.com。源字符串只能包含至少一个 * 通配符，例如 http://*.example.com。您可以选择将 * 指定为源，以允许所有源发送跨源请求。您还可以指定 https 只允许安全的源
AllowedHeader 元素

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

序号	head name
1	Authorization
2	Content-Length
3	Content-Type
4	Content-Type
5	Content-MD5
6	Date
7	Expect
8	Host
9	x-amz-content-sha256
10	x-amz-date
11	x-amz-security-token