Rubyonrails Rails 7 富文本不显示附加的媒体内容

我正在开发一款使用ActionText/Trix编辑器的Rails7应用程序.我正在使用Amazon AWS/S3存储文件.我已经验证并可以看到媒体文件被上传到S3，但由于某种原因，它们没有显示(在试图编辑内容或我想要呈现它的时候，也没有在编辑器中显示).我使用S3进行正常的图像/媒体上传，在其他情况下图像可以正常显示.

我的配置如下所示:

# storage.yml
amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: eu-north-1
  bucket: <app name>-<%= Rails.env %>

# credentials.yml
aws:
  access_key_id: xxx
  secret_access_key: xxx

文本可以正确显示，只有媒体文件不会显示(无论是在开发中还是在生产中).

我的_blob.html.erb文件如下所示:

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file"   %> attachment--<%= blob.filename.extension %>">
  <% if blob.image? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>

  <% if blob.video? %>
    <%= video_tag url_for(blob.attachable),
    preload: "auto",
    ... %>
  <% end %>

  <% if blob.audio? %>
    <%= audio_tag url_for(blob.attachable), controls: "controls" %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% end %>
  </figcaption>
</figure>

在Trix编辑器中上传媒体文件后，该文件不会显示:

按如下方式呈现表单元素:

<%= rich_content_form.rich_text_area :content %>
<%= rich_content_form.hidden_field :id if rich_content_form.object.persisted? %>

在我的模型中有这样一个:

has_rich_text :content

对于为什么我的媒体文件不能显示，有什么建议或提示吗？

Update个

查看我的浏览器控制台，我得到以下错误:

[Error] Failed to load resource: Origin http://localhost:3000   is not allowed by Access-Control-Allow-Origin. Status code: 200   (bo2qo7q0diw0juxl9v85y63nv771, line 0)

[Error] XMLHttpRequest cannot load https://<bucket-name>.s3.eu-north- 1.amazonaws.com/bo2qo7q0diw0juxl9v85y63nv771?X-Amz-算法rithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T103209Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=a0f1b1cc9be7cf2a4618095379fda05bde5418707c280ca2473cad604 6d6a671 due to access control checks.

[Error] Error: Direct upload failed: Error storing "grooveland-  designs-8kkTIumkHxU-unsplash.jpg". Status: 0
nrWrapper (860.03a8b7a5-1.236.0.min.js:1:6259)

Update 2 - Chrome个

上面的控制台日志(log)来自Safari，在Chrome中我得到了以下内容:

edit:1 Access to XMLHttpRequest at 'https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-算法rithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f' from origin 'http://localhost:3000' has been blocked by  CORS policy: Response to preflight request doesn't pass access  control check: No 'Access-Control-Allow-Origin' header is present  on the requested resource.
 
860.03a8b7a5-1.236.0.min.js:1 Uncaught Error: Direct upload  failed: Error storing "grooveland-designs-8kkTIumkHxU- unsplash.jpg". Status: 0
at AttachmentUpload.directUploadDidComplete (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849:13)
at BlobUpload.callback (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624:17)
at BlobUpload.requestDidError (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597:12)
at XMLHttpRequest.<anonymous> (actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js:582:57)
at XMLHttpRequest.nrWrapper (860.03a8b7a5- 1.236.0.min.js:1:6208)

directUploadDidComplete @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849
(anonymous) @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624
requestDidError @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597

[...]

actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :586     PUT https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-算法rithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f net::ERR_FAILED