[英]Unable to fetch images from cloudfront cdn using fetch API in the browser
I keep getting TypeError: Failed to fetch
when using fetch
API to get images from my cloudfront cdn.我不断收到TypeError: Failed to fetch
when using fetch
API to get images from my cloudfront cdn. A sample URL that demonstrates this problem is https://cdn.dev.textras.com/videos/thumbnails/614fc78597910a00134de449/073be298-4ee4-4521-94fb-f7e0b131d999/screenshot-1.jpg?w=320&q=100&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNTkwNDMwODA3NDUzMDAxM2Y4ZTY1YyIsImNvdW50cnlDb2RlIjoiTkdBIiwiaWF0IjoxNjQyMDAzNzUyLCJleHAiOjE2NDIyNjI5NTJ9.mZ8TPa-OQOfpCWPXYYKPQvFyEA-UigpLs13vhQGuuME
. A sample URL that demonstrates this problem is https://cdn.dev.textras.com/videos/thumbnails/614fc78597910a00134de449/073be298-4ee4-4521-94fb-f7e0b131d999/screenshot-1.jpg?w=320&q=100&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNTkwNDMwODA3NDUzMDAxM2Y4ZTY1YyIsImNvdW50cnlDb2RlIjoiTkdBIiwiaWF0IjoxNjQyMDAzNzUyLCJleHAiOjE2NDIyNjI5NTJ9.mZ8TPa-OQOfpCWPXYYKPQvFyEA-UigpLs13vhQGuuME
If you use that url as the src
for an <img>
tag, the image loads.如果您使用该 url 作为<img>
标记的src
,则会加载图像。 If you visit the URL in a browser tab, the image loads.如果您在浏览器选项卡中访问 URL,则会加载图像。 If you open dev tools within that same tab and then do a fetch
request to get the image (ie same origin), the fetch
request succeeds.如果您在同一选项卡中打开开发工具,然后执行fetch
请求以获取图像(即相同来源),则fetch
请求成功。 If you request the image using postman or curl
from the terminal, the request succeeds.如果您从终端使用 postman 或curl
请求图像,则请求成功。 However if you're in a browser tab with a domain different from my cdn (ie cross origin), it doesn't load.但是,如果您在一个域与我的 cdn 不同(即跨域)的浏览器选项卡中,它不会加载。 This seems like a classic CORS problem.这似乎是一个经典的 CORS 问题。 This is a snippet from the template that defines the behavior of the cloudfront distribution.这是定义云端分发行为的模板片段。 I'm only including the part that defines the behavior that affects this particular image:我只包括定义影响此特定图像的行为的部分:
...
CloudFrontDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Aliases: !Ref AliasesParam
Comment: !Ref Comment
CacheBehaviors:
- AllowedMethods: "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT"
CachedMethods: "GET,HEAD,OPTIONS"
Compress: false
PathPattern: 'videos/thumbnails/*'
DefaultTTL: "1814400"
ForwardedValues:
QueryString: true
QueryStringCacheKeys:
- w
- h
- t
- q
- v
LambdaFunctionAssociations:
- EventType: 'viewer-request'
LambdaFunctionARN: !Ref ViewerRequestFunctionVersionArn
- EventType: 'origin-request'
LambdaFunctionARN: !Ref LambdaVideoPathEdgeVersionArn
- EventType: 'origin-response'
LambdaFunctionARN: !Ref OringResponseFunctionVersionArn
MaxTTL: 31536000
MinTTL: 0
SmoothStreaming: false
TargetOriginId: !Ref IdParam
ViewerProtocolPolicy : "redirect-to-https"
# TrustedSigners:
# - String
The template doesn't specify a response header policy, so I tried setting one of the managed CORS policies directly from the cloudfront dashboard.该模板未指定响应 header 策略,因此我尝试直接从云端仪表板设置托管 CORS 策略之一。 I tried both the SimpleCORS
and CORS-with-preflight-and-SecurityHeadersPolicy
(ie the 2 ends of the spectrum for the managed policies), but the problem persisted.我尝试了SimpleCORS
和CORS-with-preflight-and-SecurityHeadersPolicy
(即托管策略的两端),但问题仍然存在。
I've also reviewed this list of possible reasons for TypeError
, and I think it can only be due to the response because the requests works except when I'm requesting from a browser tab with a different origin domain.我还查看了TypeError
的可能原因列表,我认为这只能归因于响应,因为请求有效,除非我从具有不同源域的浏览器选项卡请求。
Any ideas as to what the problem could be?关于问题可能是什么的任何想法? Thanks!谢谢!
You might have to enable the OPTIONS
method for HTTP requests.您可能必须为 HTTP 请求启用OPTIONS
方法。 This is required after you enable CORS properly.正确启用 CORS 后,这是必需的。 Follow this blog for more details: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/关注此博客了解更多详情: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.