由于CORS，无法从S3存储桶中获取图像

Question

问题是Access-Control-Allow-Origin当我尝试使用fetchAPI 进行提取时，我收到了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>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

可以在这里找到代码-https: //codepen.io/sourov0805045/pen/OKVBXM?editors=1111

我已经检查了响应标头，发现它不包含Allow-Access-Control-Origin标头。

但这如果我在一个<img>令人费解的标签中添加它可以正常工作。那时Access-Control-Allow-Origin响应头中也没有，但是图像正确加载。

A尝试了相同但axios没有效果。

请让我知道您对我如何解决此问题的建议。

Answer 1

首先删除不必要的变量：从命令行使用 cURL。

第 1 步：发出飞行前OPTIONS请求：

curl -H "Origin: http://example.com" \
      -H "Access-Control-Request-Method: GET" \
      -H "Access-Control-Request-Headers: X-Requested-With" \
      -X OPTIONS --verbose \
      'https://twisker-s3-files.s3.us-east-2.amazonaws.com/files/-GxfyX_dZ-6313383.jpg'

您在输出中查找的响应标头是：

...
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, PUT, HEAD, DELETE
< Access-Control-Allow-Headers: x-requested-with
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
...

第2步：发出GET请求：

~ $ curl --head 'https://twisker-s3-files.s3.us-east-2.amazonaws.com/files/-GxfyX_dZ-6313383.jpg' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36' -H 'Referer: https://cdpn.io/boomboom/v2/index.html?editors=1111&key=iFrameKey-a88ea9ee-51a6-0ae2-7350-951a5b1e4e56' -H 'Origin: https://cdpn.io' --compressed

这是回应：

HTTP/1.1 200 OK
x-amz-id-2: 9D3J5BnHo7YocXQicso+eQAC/PlyoOMpc5QXd+G77HMtWTOd8kYymcJnQ0T8J7tqXetMZgVO8Rw=
x-amz-request-id: 6CE1579D5B039163
Date: Thu, 25 Jul 2019 02:18:41 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, HEAD, DELETE
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Wed, 26 Jun 2019 19:18:40 GMT
ETag: "8e26c03714ab4d8e185c29b1c04639f0"
Accept-Ranges: bytes
Content-Type: application/octet-stream
Content-Length: 1573767
Server: AmazonS3

有几点需要注意：

1. Access-Control-Allow-Origin并Access-Control-Allow-Methods存在
2. 他们的值看起来是正确的，所以 CORS 应该适合你（它在你的 URL 上对我有用）

https://www.test-cors.org可用于测试 CORS 请求。它在请求的每个阶段提供一些输出。

最后，浏览器非常积极地缓存飞行前 OPTIONS 请求。因此，如果您正在查看 Chrome 网络调试工具，您可能看不到飞行前 OPTIONS 请求。有时重新启动chrome会清除OPTIONS缓存，有时需要清除所有浏览器缓存。

如果服务器端没有正确配置 CORS，并且浏览器会缓存响应，则此缓存可能会出现问题。GET例如：您在最初配置 CORS 时不允许。您发出OPTIONS请求，浏览器会缓存响应，从而阻止将来的GET请求。