[英]Fetching an image from S3 bucket is not working because of CORS
The problem is i am getting the cors error (response header does not contain Access-Control-Allow-Origin
) when i try to fetch using fetch
API.问题是当我尝试使用
fetch
API 获取时,我收到 cors 错误(响应 header 不包含Access-Control-Allow-Origin
)。 Here is my cors config in S3 -这是我在 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>
The code can be found here - https://codepen.io/sourov0805045/pen/OKVBXM?editors=1111代码可以在这里找到 - https://codepen.io/sourov0805045/pen/OKVBXM?editors=1111
I have checked the response header and saw it does not contain the Allow-Access-Control-Origin
header.我检查了响应 header,发现它不包含
Allow-Access-Control-Origin
header。
But this works properly if i add this in a <img>
tag which is quite puzzling.但是,如果我将它添加到一个非常令人费解的
<img>
标记中,这将正常工作。 That time there is no Access-Control-Allow-Origin
in the response header as well but the image loads properly.那时响应 header 中也没有
Access-Control-Allow-Origin
,但图像加载正确。
A have tried the same with axios
with no effect. A 已尝试与
axios
相同,但没有效果。
Please let me know you suggestion on how can i solve this problem.请让我知道您对如何解决此问题的建议。
First start off by removing un-necessary variables: use cURL from the command line.首先删除不必要的变量:从命令行使用 cURL。
Step 1: Issue the pre-flight OPTIONS
request:第 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'
The response headers you are looking for in the output are:您在输出中查找的响应标头是:
...
< 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
...
Step 2: Issue the GET
request:第 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
Here is the response:这是回应:
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
Few things of note:几点注意事项:
Access-Control-Allow-Origin
and Access-Control-Allow-Methods
exist Access-Control-Allow-Origin
和Access-Control-Allow-Methods
https://www.test-cors.org can be used to test CORS requests. https://www.test-cors.org可用于测试 CORS 请求。 It gives some output on each phase of the request.
它在请求的每个阶段提供一些输出。
Last, browsers are very aggressive on caching the pre-flight OPTIONS request.最后,浏览器在缓存飞行前 OPTIONS 请求方面非常积极。 So if you are looking at chrome network debug tools, you may not see the pre-flight OPTIONS request.
因此,如果您正在查看 chrome 网络调试工具,您可能看不到飞行前 OPTIONS 请求。 Sometimes re-starting chrome will clear the OPTIONS cache, sometimes it requires clearing all the browser cache.
有时重启chrome会清除OPTIONS缓存,有时需要清除所有浏览器缓存。
This caching can be problematic if you don't have CORS correctly configured server side, and the browser caches the response.如果您没有正确配置 CORS 的服务器端,并且浏览器缓存响应,则此缓存可能会出现问题。 Ex: you don't allow
GET
when you initially configure CORS.例如:您在最初配置 CORS 时不允许
GET
。 You issue the OPTIONS
request and the browser caches the response, blocking future GET
requests.您发出
OPTIONS
请求,浏览器缓存响应,阻止未来的GET
请求。
Since S3 links start with //
it will use the current protocol to make request.由于 S3 链接以
//
开头,它将使用当前协议发出请求。 If you have http://localhost
AWS won't allow you to make request over http, even if the AllowedOrigins
is *
.如果您有
http://localhost
AWS 将不允许您通过 http 发出请求,即使AllowedOrigins
是*
。
Prefix URL with https
in axios url param, and it should work.在 axios url 参数中使用
https
前缀 URL,它应该可以工作。
The issue is with the way AllowedOrigins
value configuration is perceived by the S3 internally.问题在于 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! 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.