I’m creating a new topic because I’m not getting any further on my following posts and I’m pretty frustrated:
I’m hoping for someone with another idea.
I tried using IONOS, Amazon AWS and Digital Ocean with the recommended CORS settings from @Teodor, but I always get the same CORS errors with the Download Component.
I just need to download the PDF files directly instead of opening in a new browser tab. Does someone have another idea how to do this and got this working?
Bump 
Am I the only one with this problem?
I updated my test-website https://www.***.de with aws and Digital Ocean. CORS set like recommended. Download still opens in Browser instead of direct download.
I need to go live with my updated website with S3 integration and really need a solution for this. Any hint what I could do?
All I want is a simple direct download from S3.
In both cases it fails the cors check and I also don’t see any cors headers in the response.
I’ve made a small change in the download component to handle filenames, please check if it helps to prevent the file being opened in the browser. Since the cors fails it will still use the browser download and not using xhr, so a progress can not be tracked, but it should not open it in the browser.
dmxDownload.zip (1.2 KB)
Thank you for the updated file. It doesn’t make a difference.
What I tried with aws is to add HEAD in the CORS JSON. It doesn’t show the CORS error anymore. But this is only for aws. With other providers it does not work.
New CORS setting in aws:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
CORS Setting for Digital Ocean:
I don’t understand why there is no CORS Header in the response.
With AWS I see the cors headers:
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD
Access-Control-Allow-Origin: *
But the server returns status 403.
With Digital Ocean it returns no cors headers and is getting a cors error. I use the same cors configuration in my tests, only the Access Control Max Age is higher.
It seems that the fallback doesn’t work in chrome, again is cors the reason for this. It seems that they decided that when a file comes from an other domain then they will ignore the download property of a link. The link will then be opened in a normal way, so the pdf will be handled as default and opened in the browser.
https://bugs.chromium.org/p/chromium/issues/detail?id=714373
I will try to change my settings according to yours. Does it work for you?
Workaround you can test is setting Content-Type or/and Content-Disposition. On Digital Ocean you can change them with Manage Metadata. Set Content-Disposition to attachment.
The workaround for Digital Ocean does work for the test file. My problem is that I have over 100.000 files in my S3 bucket . How do I change them? Could it be possible to change the signed URL or can I set it on upload?
I checked the API and it is possible to set all this when uploading the file, but it is not available in the server connect action, there we only have the most common used properties added. Will see if we could perhaps add some extra properties. What server model (Node/PHP) do you use? Then I will post an update here when I have one.
I‘m using NodeJS on the backend for uploading the documents. That would really help me a lot.
I just realised that the fallback does not work with Safari for mobile (iPhone, iPad). No Download at all. Could you please also look at this problem?
What I still don‘t understand, why I‘m not able to set CORS correctly. Does it work in your tests and could recommend the correct settings?
The workaround is using creating an a tag with an download attribute to do the download, seems that the download attribute also require CORS but don’t give an error, it then just opens the link in a normal way instead of downloading.
So the only way for you when you can’t get CORS working is setting the correct headers for the file. Will try to post an update for you here today for that.
btw. Do you have CDN enabled on your Spaces? If so then you need to Purge the Cache after changing the CORS settings else they don’t work it seems.
No, I don’t have CDN enabled. I already looked at this post from stackoverflow on my search after a solution for my CORS problem. Did you get CORS working in your tests?
Thanks a lot for looking into this. What do you think about the problem with Safari for iPhone and iPad?
I don’t have an iPhone, so can’t test. But does it just like with chrome open the pdf directly or does it just do nothing?
It just does nothing.
Here the updated s3 library. You have to edit the action file by hand since the new options are not available in the UI. Unzip the file in lib/modules.
s3.zip (1.1 KB)
The putFile action has contentType and contentDisposition as extra options, default it will detect the contentType automatically by the file extension. Here my example:
{
"name": "putFile",
"module": "s3",
"action": "putFile",
"options": {
"provider": "digitalOcean",
"bucket": "wapplertest",
"path": "/public/assets/dummy.pdf",
"contentDisposition": "attachment",
"key": "dummy.pdf",
"acl": "public-read"
},
"outputType": "boolean"
}
I also added a new action to the s3 module, it will allow you to download the file using the server action, this works around the CORS problem. You then use the server connect url instead of the s3 url in the download component.
Usage:
{
"name": "downloadFile",
"module": "s3",
"action": "downloadFile",
"options": {
"provider": "digitalOcean",
"bucket": "wapplertest",
"key": "dummy.pdf"
}
}