Rails Font CORS policy

Question

I can't load this font for a CORS Policy.

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

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

Error:

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.

Response HTTP status code

If I go directly to http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2 I can download the file successfully.

I have already tried with rack-cors gem, but it's not working

config/environments/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"); }

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? What happens if you paste `http://localhost:3000/assets/Inter-UI.var-e2e323d19d24946c4d481135af27ba00f3266aa9d4abe4262e97088feccb6ca4.woff2` into your browser address bar and try to open it directly in the browser? — sideshowbarker, Jul 10 '19 at 02:16
It just says "(failed) net::ERR_FAILED" (added screenshot). If I go directly to font file URL it downloads it successfully. — sparkle, Jul 10 '19 at 08:45
Do you use `0.0.0.0` in any form to open your site in browser or start Rails server? — Pavel Mikhailyuk, Jul 13 '19 at 08:41
I don’t know if I undertstood what you meant. I start my server using “rails s” and it gives me the address 0.0.0.0:3000. Every url is generated by rails — sparkle, Jul 13 '19 at 09:09
Can you make sure this is the first middleware that gets installed? — Tarun Lalwani, Jul 13 '19 at 14:01
It says "config.middleware.insert_before 0" so I guess so. How can I be 100% sure? — sparkle, Jul 13 '19 at 14:56
this happens when CORS request is sent to a server that doesn't set Access-Control-Allow-Origin header in the response, in this case, request fails. Specifically, the browser disallows the request. Even if the server returns a successful response, the browser does not make the response available to the client application, hope this could help :) — Lety, Jul 18 '19 at 15:27
maybe this can help you bind your local host server https://stackoverflow.com/questions/28668436/how-to-change-the-default-binding-ip-of-rails-4-2-development-server — Julius Limson, Jul 19 '19 at 08:36

Kamal Pandey · Answer 1 · 2019-07-19T03:48:04.090

Try adding this to application.rb

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

and update

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

and you can simply use

<%= 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"); 
 }

and if you are using fonts.css.erb inside the 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

Thank you. It's already present. Even with the "woff2" at the end. — sparkle, Jul 13 '19 at 15:04
Done, but nothing changed. No errors showed, the font it's not displayed. I don't know. — sparkle, Jul 18 '19 at 20:41
It is due to the fact that font location is not correct. Will you test with the new one — Kamal Pandey, Jul 19 '19 at 03:36

Rails Font CORS policy

1 Answers1

Linked