我无法为 CORS 策略加载此字体。
文件夹 :app/assets/fonts/Inter-UI.var.woff2
<%=preload_link_tag("Inter-UI.var.woff2", as:'font', crossorigin: "anonymous")%>
错误:
Access to font at 'http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2' from origin 'http://0.0.0.0:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
响应 HTTP 状态码
如果我直接去http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2我可以成功下载文件。
我已经尝试过 rack-cors gem ,但它不起作用
配置/环境/development.rb
Rails.application.configure do
config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*', :headers => :any, :methods => :any
end
end
application.rb
config.assets.precompile << /\.(?:svg|eot|woff|ttf|woff2)$/
Assets .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
和
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
做@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");
}
并做
rake assets:precompile
关于ruby-on-rails - Rails 字体 CORS 政策,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56960709/