---
# System prepended metadata

title: Rails 6 Action Text 圖片無法上傳至 Amazon S3
tags: [專案]

---

###### tags: `專案`
# Rails 6 Action Text 圖片無法上傳至 Amazon S3 

## 釐清所有狀態
1. 使用 Rails 6.1.6.1 
2. access_key_id 和 secret_access_key 都正確
3. 有 Active Storage 設定
4. 使用 Active Storge 可以成功上傳圖片至 S3
5. 使用 Action Text 卻無法上傳至 S3


![](https://i.imgur.com/88aOXE4.png)

![](https://i.imgur.com/WhhajKY.png)

進入終端機查看 Log 紀錄
![](https://i.imgur.com/Jm5T8xX.png)

 顯示錯誤:
 `<Code> SignatureDoesNotMatch </Code>`
 
`<Message> The request signature we calculated does not match the signature you provided. Check your key and signing method. </Message>`

![](https://i.imgur.com/vsyF1SN.png)

有了這個錯誤就可以去 google ，但是資料不多，我一直誤認為是 access_key_id 和 secret_access_key 的配置問題，結果花了三天才解決

## 原因與解法

**Action Text 和 Trix Rich Text Editor 使用用戶端直接上傳，也就是文件會直接從瀏覽器上傳到 Amazon S3，而無需通過 Rails 伺服器。此時從瀏覽器向另一個網站發出請求時，我們必須處理 CORS 規範**

[如何在 Amazon S3 中設定 CORS 並使用 cURL 確認 CORS 規則？](https://aws.amazon.com/tw/premiumsupport/knowledge-center/s3-configure-cors/)

我們要在 AWS 的 Bucket 設定 CORS
![](https://i.imgur.com/iUX3qMn.png)

![](https://i.imgur.com/d0ldL7s.png)

![](https://i.imgur.com/bcnjLc3.png)

![](https://i.imgur.com/1IpA6ox.png)

## 修正結果

![](https://i.imgur.com/lXZR6J7.png)

![](https://i.imgur.com/jztFbWY.png)

PS 前面圖中的灰色線條，其實是上傳到 Amazon S3 的進度條。因為用戶端請求一直沒有成功進入 Amazon S3 的 CORS 權限，所以一直卡在那