Rails 内容安全策略不允许来自 API 的外部图像

Question

我正在使用外部 API 来显示源图像https://i.ibb.co

img src URL 如下所示：https://i.ibb.co/R0VHJbd/ds.png

在生产中，我在显示图像时遇到问题。在控制台中，出现错误：

Refused to load the image 'https://i.ibb.co/R0VHJbd/ds.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".

但是，即使在将 index.html 中的内容安全策略设置为：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' https://i.ibb.co; connect-src 'self' https://api.imgbb.com; child-src *; object-src *">

我仍然收到错误

尝试通过 API 上传时，我也遇到相同的错误，即使connect-src在我的元标记中定义了

Refused to connect to 'https://api.imgbb.com/1/upload?expiration=600&key=<key>' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

我已rack-cors启用允许所有请求

应用程序.rb

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end
end

配置/初始化器/rack_cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
        origins '*'
        resource '*', 
        headers: %w(Authorization),
        expose: %w(Authorization),
        methods: :any
    end
end

配置/初始化程序/content_security_policy.rb

Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.font_src    :self, :https, :data
  policy.img_src     :self, :https, "i.ibb.co", :data
  policy.object_src  :none
  policy.script_src  :self, :https
  policy.style_src   :self, :https
  # If you are using webpack-dev-server then specify webpack-dev-server host
  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

  # Specify URI for violation reports
  # policy.report_uri "/csp-violation-report-endpoint"
end

我该如何解决这个问题？

注意：这是一个运行在 Rails 服务器上的 Angular 项目，因此首先编译主页上提供的 Angular index.html，然后编译 Rails

供参考：我在 Heroku 上的项目