I'm using AWS Cloudfront to service audio files to user. Recently several user reported that they are unable to play my audio file. A browser refresh is required to make it work if the audio is stuck.
In the Google Chrome console, it outputs
Failed to load resource:
net::ERR_CACHE_OPERATION_NOT_SUPPORTED
I already have a cache settings in my Cloudfront Behavior settings,
Only default settings is on the origin s3 bucket.
CF cache settings
Any suggestion?
I faced the same issue with a cloudfront video failing to load due to this error. I was able to resolve it using javascript like this:
var videoLink = videoControl1.children[0].src; // videoControl1 is the HTML5 video element, should work similarly for audio.
if (!videoControl1.readyState){
videoControl1.children[0].src = videoLink + "?v=" + Math.random();
videoControl1.load();
}
I followed the suggestion from here: https://github.com/igvteam/igv.js/issues/424#issuecomment-336336788
If you are going to change audio/video source dynamically and play that video/audio, you need to load with load() JS function first that resource before playing.
Related
I have a Lambda function (a packaged next.js app) which I'm trying to access via CloudFront. The web app works unless I try to hit the homepage.
When I hit /search or /video/{videoId} the page loads just fine.
When I try to hit the homepage, I get the following error page:
502 ERROR
The request could not be satisfied.
The Lambda function returned invalid JSON: The JSON output is not parsable. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: {id}
Why would just the homepage be invalid JSON? Where can I see this JSON to determine what is wrong? I created a mock Cloudfront request test in the Lambda function and it just returns successfully.
The problem was due to the 1 MB size limit of CloudFront Lambda#Edge responses. I didn't realize that Next.js's serverside rendering was creating a large <script id="__NEXT_DATA__"> tag on my homepage with all the fetched info from my API duplicated multiple times over. This resulted in my app's homepage being >2 MB.
I refactored my app to only send one network request, and made sure that data is only put into the __NEXT_DATA__ tag once. The app now works.
Our team is building a web app that allows users to download video files. We currently host our files on AWS S3, but since our site doesn't reside on AWS, we can't use <a href="blah"> to prompt download. If we use that html element, users simply get redirected to a video player - which is fine, but Safari on mobile doesn't allow for users to download the video file via the video player.
We found that manually setting the file's content disposition to attachment on S3 works, but we have not found a way to automate that. We tried adding a content-disposition: attachment key-value pairing in our payload, which works, but adds a "User defined" meta data in the form of x-amz-meta-content-disposition, which doesn't work as the file could not be downloaded as an attachment. It seems only "System defined" works.
Has anyone ever encountered this issue before and found a workaround?
see screenshot for what I'm referencing
You can set the content disposition when the file is created.
This is done by uploading the file via a presigned url.
See https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html for details on the presigned urls.
Alternatively you can use a presigned url to return to get the file from S3 and override the content disposition header on the GET request.
I am trying to access the Cloudfront Cache Statistics programmatically. Via the UI you can see the Statistics via clicking on "CloudFront" and then on the left side under "Reports & analytics" the link "Cache Statistics".
I am using the Java SDK 1.11. However the structure is similar in all sdk bindings. I already tried:
AmazonCloudFront cloudFront = AmazonCloudFrontClientBuilder.defaultClient();
GetDistributionRequest request = new GetDistributionRequest();
request.setId("E3C1N6KKRS04QE");
GetDistributionResult result = cloudFront.getDistribution(request);
System.out.println(result);
However, that seems to get my the information shown on the "Distribution"-Tab in the UI. Any help would be appreciated!
For the past 12 or so hours when I go here:
https://console.developers.google.com/apis/credentials?project=MYPROJECTNAME
I just get the spinning / loading animation. I have tried other browsers and other computers to no avail. I just need to add another OATH key. Is the service somehow broken? Is there something else I can do?
The browser shows some errors.
Refused to display 'https://apikeys.clients6.google.com/static/proxy.html?usegapi=1&js [ stuff deleted] in a frame because it set 'X-Frame-Options' to 'sameorigin'.
and a few 404s
cloudusersettings-pa.clients6.google.com/v1alpha1/settings/PAN_NOTIFICATION_BELL_LAST_OPENED?key=[deleted]:1 Failed to load resource: the server responded with a status of 404 ()
like it's able to load the front end but not access the data it needs.
Sounds like it's a Google issue, just got a response back from Google:
Description:
We are experiencing elevated latency in the API Credentials page of Google
Developers Console beginning at 2019-02-09 20:06 PST.
We are using the external issue tracker as the main communication channel
to provide updates on this issue. Please star the issue here to receive
further updates: https://issuetracker.google.com/124188941.
This Issue Tracker entry is the authoritative source for public information
regarding this issue. All publicly-applicable updates will be posted there.
How to diagnose:
1. Visit Google Developers Console.
2. Select "APIs & Services".
3. Select "Credentials".
Result: Credentials page will continuously load.
Workaround:
There's no workaround available at this time, but we'll let you know via
the external issue tracker (https://issuetracker.google.com/124188941) if
we learn of one.
Is there any way to load images from S3 to browser only if they were changed, by sending If-Modified-Since header?
It should be enabled by default on browsers and S3 but tests saying that images are loading on every refresh.
Amazon S3 supports the If-Modified-Since header already, as well as the related If-None-Match (which uses an ETag instead of a date).
So, the way to load images only if they were changed is to actually use the If-Modified-Since, or If-None-Match if you have the Etag. However, since you are talking about loading it to a browser, most browsers will already be doing this unless you have done something funky to disable browser caching.
See http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectGET.html#RESTObjectGET-requests-request-headers for details on the supported headers.
Are you experiencing a situation where the browser is still loading the images from S3 even if they haven't been changed? If so, do you have more details on that, e.g. the browser, version, and something like a Chrome network tab HAR file illustrating the symptoms?
By default, it should just work on both sides with no custom changes. I just replicated by uploading a fresh png image file to S3. In a fresh browser window, I opened the dev tools and loaded the network tab. I ensured that the 'disable caching' was UNticked, and 'preserve log' was ticked (to keep the log over multiple F5 refreshes).
I loaded the image and then hit F5 to reload twice. The result was:
As you can see, the first load was with a 200 status, the other requests received 304.