Question

我试图在我的rails应用中使用谷歌字体，但我在我的控制台上收到此消息并且未加载该字体。

XMLHttpRequest无法加载http://fonts.googleapis.com/css?family=Open+Sans。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://pre.blabloo.com＆＃39;因此不允许访问。

我在localhost：3000上遇到了同样的错误。我将以下代码添加到我的应用程序助手中，但我仍然收到错误。

after_filter :set_access_control_headers

def set_access_control_headers 
    headers['Access-Control-Allow-Origin'] = '*'  
    headers['Access-Control-Request-Method'] = '*' 
end

或

after_filter :set_access_control_headers

def set_access_control_headers 
    headers['Access-Control-Allow-Origin'] = 'https://pre.blabloo.com'  
    headers['Access-Control-Request-Method'] = '*' 
end

但没有任何反应

请帮助。

更新

我也尝试过这样的架子上的宝石：

在我的配置/应用程序上：

config.middleware.insert_before "ActionDispatch::Static", "Rack::Cors" do
      allow do
        origins 'http://localhost:3000'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

但它不起作用。现在我在youtube上遇到了另一个交叉问题。

Answer 1

我会像这样将它添加到你的application.rb

config.action_dispatch.default_headers = {
    'Access-Control-Allow-Origin' => '*',
    'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") # or whatever else you would like to allow
}

适合我。

Answer 2

我已经尝试重现您的问题，并且通过以下布局和stylesheet_link_tag正在为我工作：

<!DOCTYPE html>
<html>
<head>
  <title>SoAccessControl</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag    'application', 'http://fonts.googleapis.com/css?family=Open+Sans' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我在样式表中设置了正确的font-family并且它有效。之后，我尝试设置标题。这很有用：

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  after_filter :set_cors

  def set_cors
    headers['Access-Control-Allow-Origin'] = 'https://example.com'
    headers['Access-Control-Request-Method'] = '*'
  end
end

这里验证： verify

Answer 3

我无法使用'Access-Control-Allow-Origin'的任何配置解决问题，所以我决定将字体上传到服务器。

非常感谢你的帮助。

请求的资源上不存在“Access-Control-Allow-Origin”标头。谷歌字体

3 个答案: