質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

0回答

805閲覧

AWS S3に保存されている画像をTwitterにOGP画像として表示したいです

okada_3030

総合スコア15

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

1クリップ

投稿2022/09/17 03:31

編集2022/09/17 03:34

前提

Rails 6.1.6
Ruby 3.1.2

実現したいこと

Twitter共有時、AWS S3に保存されている画像をOGP画像として表示したいです
初学者なため、初歩的な質問になってしまうかもしれませんが、よろしくお願いいたします

発生している問題・エラーメッセージ

Twitterに共有しようとするとOGP画像が表示されません

Chromeの拡張機能のLocalhost Open Graph Debuggerを使うと下記のエラーが出ます

Access to fetch at 'https://s3.ap-northeast-1.amazonaws.com/my-fullcourse/uploads/fullcourse/fullcourse_image/14/mini_magick20220916-4-d4cf47.jpg?X-Amz-Expires=600&X-Amz-Date=20220917T023902Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT7CV2CNXT67VE4SS%2F20220917%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=dca5d66bab90b41892de31fbb0c70c21c49ae424241a78a654a2aae84920011f' from origin 'https://oreno-fullcourse.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Failed to load resource: net::ERR_FAILED

試したこと

画像をapp/assts配下のものに変更すると表示できたためメタタグのコードは問題ないと思います

https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-configure-cors/
上記の記事を参考にAWS S3のCORSルールを以下のように設定

[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET", "HEAD" ], "AllowedOrigins": [ "https://oreno-fullcourse.herokuapp.com" ], "ExposeHeaders": [ "Access-Control-Allow-Origin" ] } ]

CORS ルールのテスト

$ curl -i "https://s3.ap-northeast-1.amazonaws.com/my-fullcourse/uploads/fullcourse/fullcourse_image/14/mini_magick20220916-4-d4cf47.jpg?X-Amz-Expires=600&X-Amz-Date=20220917T022819Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT7CV2CNXT67VE4SS%2F20220917%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=23ae9b2d6fda68cc8467c5d639eadde342ff106933e4f837649f2428a79c9960" -H "Origin: https://oreno-fullcourse.herokuapp.com" HTTP/1.1 403 Forbidden Access-Control-Allow-Origin: https://oreno-fullcourse.herokuapp.com Access-Control-Allow-Methods: GET, HEAD Access-Control-Expose-Headers: Access-Control-Allow-Origin Access-Control-Allow-Credentials: true Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method x-amz-request-id: PEP4SZN580YKBYPD x-amz-id-2: DE3vbIUSooIuJWTf4WhYbJtK/812PcvWHc9jAtMEb8TwXlllVbfjhjXHonn7PMfoUw0Xef0oaYk= Content-Type: application/xml Transfer-Encoding: chunked Date: Sat, 17 Sep 2022 02:55:46 GMT Server: AmazonS3 <?xml version="1.0" encoding="UTF-8"?> <Error><Code>AccessDenied</Code><Message>Request has expired</Message><X-Amz-Expires>600</X-Amz-Expires><Expires>2022-09-17T02:38:19Z</Expires><ServerTime>2022-09-17T02:55:47Z</ServerTime><RequestId>PEP4SZN580YKBYPD</RequestId><HostId>DE3vbIUSooIuJWTf4WhYbJtK/812PcvWHc9jAtMEb8TwXlllVbfjhjXHonn7PMfoUw0Xef0oaYk=</HostId></Error>%

CORS メソッドのトラブルシューティング

$ curl -i "https://s3.ap-northeast-1.amazonaws.com/my-fullcourse/uploads/fullcourse/fullcourse_image/14/mini_magick20220916-4-d4cf47.jpg?X-Amz-Expires=600&X-Amz-Date=20220917T022819Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT7CV2CNXT67VE4SS%2F20220917%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=23ae9b2d6fda68cc8467c5d639eadde342ff106933e4f837649f2428a79c9960" -H "Access-Control-Request-Method: GET" --request OPTIONS -H "Origin: https://oreno-fullcourse.herokuapp.com" HTTP/1.1 200 OK x-amz-id-2: +F9ezVRc7v/MDBoFjycZ86rRlsJjQYqmfnykNpmlc3RpTDqk6t3uMcVxmGbSOL4RDc6x38ndmpM= x-amz-request-id: PAEV2HQ50X34N340 Date: Sat, 17 Sep 2022 02:56:07 GMT Access-Control-Allow-Origin: https://oreno-fullcourse.herokuapp.com Access-Control-Allow-Methods: GET, HEAD Access-Control-Expose-Headers: Access-Control-Allow-Origin Access-Control-Allow-Credentials: true Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method Server: AmazonS3 Content-Length: 0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問