2022年1月6日星期四

設定 S3 的 CORS 規則，並使用 FileSaver 取得圖片下載

webber0928 凌晨2:29:00 cors, file saver, s3

最近需要做一個功能，就是把上傳的圖片下載下來。

這簡單！我啪啪啪就寫好了，結果出現了....CORS 的問題，因為網址跟 s3 的網址是不同 Domain 的，上網搜尋一下，發現只要設定好 S3 的 CORS 就可以了。

主要設置為:

權限 -> 跨源资源共享(CORS)

[ {

"AllowedHeaders": [ "*" ],

"AllowedMethods": [ "GET", "HEAD" ],

"AllowedOrigins": [ "http://www.example.com" ],

"ExposeHeaders": [],

"MaxAgeSeconds": 3000

} ]

因為我主要是取圖片，所以只要這樣設定便可以了。

另外推薦一個好的套件「FileSaver」，使用程式碼如下

import { saveAs } from 'file-saver';

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

這個好處是，如果他碰到 CORS 問題，會另開新分頁顯示圖，最差就是讓使用者直接下載，也不用處理 CORS 問題。

By webber0928

一個小菜鳥工程師，對籃球還有夢想的男孩。

I'm Wb