[英]Fetching an image from S3 bucket is not working because of CORS
问题是当我尝试使用fetch
API 获取时,我收到 cors 错误(响应 header 不包含Access-Control-Allow-Origin
)。 这是我在 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
我检查了响应 header,发现它不包含Allow-Access-Control-Origin
header。
但是,如果我将它添加到一个非常令人费解的<img>
标记中,这将正常工作。 那时响应 header 中也没有Access-Control-Allow-Origin
,但图像加载正确。
A 已尝试与axios
相同,但没有效果。
请让我知道您对如何解决此问题的建议。
首先删除不必要的变量:从命令行使用 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
几点注意事项:
Access-Control-Allow-Origin
和Access-Control-Allow-Methods
https://www.test-cors.org可用于测试 CORS 请求。 它在请求的每个阶段提供一些输出。
最后,浏览器在缓存飞行前 OPTIONS 请求方面非常积极。 因此,如果您正在查看 chrome 网络调试工具,您可能看不到飞行前 OPTIONS 请求。 有时重启chrome会清除OPTIONS缓存,有时需要清除所有浏览器缓存。
如果您没有正确配置 CORS 的服务器端,并且浏览器缓存响应,则此缓存可能会出现问题。 例如:您在最初配置 CORS 时不允许GET
。 您发出OPTIONS
请求,浏览器缓存响应,阻止未来的GET
请求。
由于 S3 链接以//
开头,它将使用当前协议发出请求。 如果您有http://localhost
AWS 将不允许您通过 http 发出请求,即使AllowedOrigins
是*
。
在 axios url 参数中使用https
前缀 URL,它应该可以工作。
问题在于 S3 在内部感知AllowedOrigins
值配置的方式。 Try giving https://*.yourdomain.com
instead of https://something.yourdomain.com
in your S3 bucket level CORS Configuration, Here is my sample configuration and it works!
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"https://*.yourdomain.com"
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.