前提
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
あなたの回答
tips
プレビュー