Access-Control-Allow-Origin 不允许 Rails 3 和 Angularjs Origin http://localhost。

Posted 2023-03-04

【中文标题】Access-Control-Allow-Origin 不允许 Rails 3 和 Angularjs Origin http://localhost。

【英文标题】：Rails 3 and Angularjs Origin http://localhost is not allowed by Access-Control-Allow-Origin.

【发布时间】：2013-11-14 16:48:57

【问题描述】：

首先，让我说我已经尝试了很多已在此处发布的解决方案。它们似乎都不适合我。我意识到我的问题源于 CORS 和我的 rails 应用程序无法正确处理。但是，我不太确定如何纠正这个问题。我希望这里有人能对这个问题有所了解。

相关代码sn-ps：

Rails application_controler.rb

class ApplicationController < ActionController::Base
protect_from_forgery
#before_filter :cors_preflight_check
before_filter :allow_cross_domain_access
after_filter :cors_set_access_control_headers

# For all responses in this controller, return the CORS access control headers.

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Max-Age'] = "1728000"
end

def cors_preflight_check
  if request.method == :options
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
    headers['Access-Control-Max-Age'] = '1728000'
    render :text => '', :content_type => 'text/plain'
  end
end

def allow_cross_domain_access
    headers['Access-Control-Allow-Origin'] = '*'# http://localhost:9000
    headers['Access-Control-Allow-Headers'] = 'GET, POST, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Methods'] = %wOrigin Accept Content-Type X-Requested-With X-CSRF-Token.join(',')
    headers['Access-Control-Max-Age'] = '1728000'
end 
end

Angular App.js

]).config(function($httpProvider)
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
);
function loginCtrl ($scope,$http) 
$scope.master = ;

$scope.isUnchanged = function(user) 
    return angular.equals(user, $scope.master);
;

$scope.login = function (user) 
    $http(
        method: 'POST', 
        /*url: 'http://localhost/test/quote.php',*/
        url: 'http://localhost:3000/api/sessions/',
        data: user
    ).success(function(data)
    
        alert("call phonegap store data function:" + data.access_token)
    ).error(function (data, status, headers, config) 
        alert("error" )
    ); 
;

来自 chorme 的错误消息

OPTIONS http://localhost:3000/api/sessions/ 404 (Not Found) angular.js:6730
OPTIONS http://localhost:3000/api/sessions/ Origin http://localhost is not allowed by Access-Control-Allow-Origin. angular.js:6730
XMLHttpRequest cannot load http://localhost:3000/api/sessions/. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

来自 Rails 服务器的错误消息

Started OPTIONS "/api/sessions/" for 127.0.0.1 at 2013-11-03 22:30:54 -0500

ActionController::RoutingError (uninitialized constant SessionsController):
activesupport (3.2.13) lib/active_support/inflector/methods.rb:230:in 
`block in constantize'               
activesupport (3.2.13) lib/active_support/inflector/methods.rb:229:in `each'
activesupport (3.2.13) lib/active_support/inflector/methods.rb:229:in `constantize'
actionpack (3.2.13) lib/action_dispatch/routing/route_set.rb:69:in `controller    
_reference' .....


 ....C:/Ruby/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `service'
 C:/Ruby/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
 C:/Ruby/lib/ruby/2.0.0/webrick/server.rb:295:in `block in start_thread'


 Rendered C:/Ruby/lib/ruby/gems/2.0.0/gems/actionpack-    
 3.2.13/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within 
  rescues/layout (0.0ms)

对此的任何帮助将不胜感激！

【问题讨论】：

你找到解决办法了吗？

是的...经过反复试验，但我想通了...但是，我的解决方案不适用于 heroku...

【参考方案1】：

我想通了。

    after_filter :cors_set_access_control_headers

# For all responses in this controller, return the CORS access control headers.

def cors_set_access_control_headers
        headers['Access-Control-Allow-Origin'] = '*'
        headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        headers['Access-Control-Allow-Headers'] = %wOrigin Accept Content-Type X-Requested-With X-CSRF-Token.join(',')
        headers['Access-Control-Max-Age'] = "1728000"
end

我将上面的代码放在我的所有 api 控制器都继承自的基本控制器中。问题是复制和粘贴解决方案。 ALLOW-headers 和 Allow-Methods 值被反转。那解决了它。

【参考方案2】：

因此，如果我理解正确，您的 rails 应用程序正在 localhost:3000 上运行，它为一个 angular 应用程序提供服务，该应用程序又从 localhost:80 请求。在这种情况下，您需要在 localhost:80 上使用 Access-Control-Allow-Origin。

【参考方案3】：

我可以看到您找到了解决问题的方法，但我只想指出，您的 allow-headers 和 allow-methods 在您的 allow_cross_domain_access 方法中也混淆了。

你有：

def allow_cross_domain_access
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Headers'] = 'GET, POST, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Methods'] = %wOrigin Accept Content-Type X-Requested-With X-CSRF-Token.join(',')
    headers['Access-Control-Max-Age'] = '1728000'
end 

应该是：

def allow_cross_domain_access
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Headers'] = %wOrigin Accept Content-Type X-Requested-With X-CSRF-Token.join(',')
    headers['Access-Control-Max-Age'] = '1728000'
end 

希望有帮助:)