前提・実現したいこと
Ruby on RailsでDragonflyを使って画像のアップロード処理を実装しています。
画像をS3にアップするところまでは実装が進んだのですが、画像の読み込みにCDNを
使った際にAccessDeniedが発生してしまいました。
発生している問題・エラーメッセージ
■画像ファイルにアクセスした際のエラーメッセージ
<Error> <script/> <Code>AccessDenied</Code> <Message>Access Denied</Message>
■Google Chromeで吐かれているエラーメッセージ
Cross-Origin Read Blocking (CORB) blocked cross-origin response
該当のソースコード
■Gemfile
gem 'dragonfly' gem 'dragonfly-s3_data_store' gem 's3_file_field'
■initializers/dragonfly.rb
Ruby
1require 'dragonfly' 2 3# Configure 4Dragonfly.app.configure do 5 plugin :imagemagick 6 7 secret ENV['DRAGONFLY_SECRET'] 8 9 url_format "/media/:job/:name" 10 11 url_host ENV['AWS_ASSET_HOST'] 12 13 datastore :s3, 14 bucket_name: ENV['AWS_BUCKET'], 15 access_key_id: ENV['AWS_ACCESS_KEY_ID'], 16 secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'], 17 region: ENV['AWS_REGION'] 18end 19 20# Logger 21Dragonfly.logger = Rails.logger 22 23# Mount as middleware 24Rails.application.middleware.use Dragonfly::Middleware 25 26# Add model functionality 27ActiveSupport.on_load(:active_record) do 28 extend Dragonfly::Model 29 extend Dragonfly::Model::Validations 30end
■model/post_image.rb(Dragonflyを利用するモデル)
class PostImage < ApplicationRecord # Image Uploader dragonfly_accessor :image do storage_options :opts_for_storage end # association belongs_to :post # dragonfly storage path def opts_for_storage dir = Rails.env { path: "#{dir}/uploads/#{self.class.name.to_s.underscore}/#{Time.zone.now.strftime("%Y%m%d%H%M%S")}" } end end
■views/post_images/show.html.haml(Dragonflyの画像の表示箇所)
= image_tag @post_image.image.thumb('500x500').url, size: '500x500'
■S3 CORS
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://localhost:3000</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
試したこと
https://qiita.com/shimbaco/items/7ab547a9eceb37793f3a
上記のサイトを参考に実装しているつもりなのですが、同様のAccessDeniedが発生しているブログ等を見つけられず、手詰まり感が漂っております。
拙い文章で申し訳ないのですが、同様の現象が発生された方などおられましたら、対応方法等、ご教示いただけますと幸甚です。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。