Rails 字体 CORS 政策

我无法为 CORS 策略加载此字体。

Folder: app/assets/fonts/Inter-UI.var.woff2

<%=preload_link_tag("Inter-UI.var.woff2", as:'font', crossorigin: "anonymous")%>

Error:

访问字体位于 'http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2 http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2' 从原点'http://0.0.0.0:3000 http://0.0.0.0:3000' 已被 CORS 政策阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

响应HTTP状态码

如果我直接去http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2 http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2我可以成功下载文件。

我已经尝试过机架 Cors gem https://github.com/cyu/rack-cors，但它不起作用

配置/环境/development.rb

Rails.application.configure do

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

应用程序.rb

 config.assets.precompile << /\.(?:svg|eot|woff|ttf|woff2)$/

资产.rb

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")

CSS

    @font-face {
  font-family: 'Inter UI';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+000-5FF;
  src: font-url("/assets/fonts/Inter-UI.var.woff2") format("woff2-variations"), font-url("/assets/fonts/Inter-UI-Italic.woff2") format("woff2"), font-url("/assets/fonts/Inter-UI-Italic.woff") format("woff"); }

尝试将其添加到application.rb

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf|woff2)$/

并更新

Rails.application.configure do

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

with

Rails.application.configure do

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

  allow do
    origins "*"
    resource "/assets/*", methods: :get,  headers: :any
   end
end

你可以简单地使用

<%= preload_link_tag("Inter-UI.var.woff2") %>



@font-face {
  font-family: 'Inter UI';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+000-5FF;
  src: font_url("Inter-UI.var.woff2") format("woff2-variations"), 
       font_url("Inter-UI-Italic.woff2") format("woff2"), 
       font_url("Inter-UI-Italic.woff") format("woff"); 
 }

如果你正在使用fonts.css.erb在 - 的里面stylesheets do

@font-face {
      font-family: 'Inter UI';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      unicode-range: U+000-5FF;
      src: url(<%= asset_path "Inter-UI.var.woff2" %>) format("woff2-variations"), 
           url(<%= asset_path "Inter-UI-Italic.woff2" %>) format("woff2"), 
           url(<%= asset_path "Inter-UI-Italic.woff" %>) format("woff"); 
     }

and do rake assets:precompile