请求的资源上不存在“Access-Control-Allow-Origin”标头:角度和轨道

Posted

技术标签:

【中文标题】请求的资源上不存在“Access-Control-Allow-Origin”标头:角度和轨道【英文标题】:No 'Access-Control-Allow-Origin' header is present on the requested resource: angular and rails 【发布时间】:2016-02-25 04:59:17 【问题描述】:

我正在开发一个示例 rails api/angular 应用程序。我在导轨上使用devise,在前端使用angular-devise。现在的问题是我在尝试进行身份验证时收到No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。

在this answer 的建议下,我已将此添加到我的application_controller

    before_filter :add_cors_headers

     def add_cors_headers
       origin = request.headers["Origin"]
       unless (not origin.nil?) and (origin == "http://localhost" or origin.starts_with? "http://localhost:")
         origin = "http://api.marketplaceapi.dev"
       end
       headers['Access-Control-Allow-Origin'] = origin
       headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE'
       allow_headers = request.headers["Access-Control-Request-Headers"]
       if allow_headers.nil?
         #shouldn't happen, but better be safe
         allow_headers = 'Origin, Authorization, Accept, Content-Type'
       end
       headers['Access-Control-Allow-Headers'] = allow_headers
       headers['Access-Control-Allow-Credentials'] = 'true'
       headers['Access-Control-Max-Age'] = '1728000'
     end

这个到 routes.rb

    match '*path', :controller => 'application', :action => 'empty', :constraints => :method => "OPTIONS"

在我的 Angular 应用程序中,在我的 app.js 中,我已经定义了这个;

  .config(function ($routeProvider, AuthProvider, SERVER) 

    $routeProvider
     ...

      AuthProvider.registerPath(SERVER.url + '/users/sign_up.json');
      AuthProvider.registerMethod('GET');
      AuthProvider.resourceName('user');
  );

还有我的 AuthCtrl

angular.module('mpfeApp')
.controller('AuthCtrl', [
    '$scope',
    '$log',
    '$location',
    'Auth',
    function register($scope, $location, $log, Auth) 
     var credentials = 
         email: 'email@mail.com',
         password: 'password1',
         passwordConfirmation: 'password1'
     ;
     var config = 
         headers: 
             'X-HTTP-Method-Override': 'GET'
         
     ;


     Auth.register(credentials, config).then(function(registeredUser) 
         console.log(registeredUser); 
     , function(error) 
         console.log('error:' + error);
     );

     $scope.$on('devise:new-registration', function(event, user) 
         console.log('from devise:new-registration event');
         console.log(user);
     );
     
]);

当我在我的 Angular 应用程序中转到 register.html 页面时,这是 console.log 输出

OPTIONS: http://api.marketplaceapi.dev/users/sign_up.json
(index):1 XMLHttpRequest cannot load http://api.marketplaceapi.dev/users/sign_up.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 404.

有没有人有任何关于在 rails 和 angular 中处理 CORS 的提示?现在我猜这个问题来自这个项目的解耦性质。我正在考虑将它们放在同一个 repo 中,但这似乎违背了使用 rails 作为 api 层的整个前提。

任何帮助将不胜感激。

【问题讨论】:

我认为在 allow_header 中添加 'X-HTTP-Method-Override' 可能会解决您在 Rails 端编写的问题。所以它会像 allow_headers = 'Origin, Authorization, Accept, Content-Type, X-HTTP-Method-Override' @krish 就是这样。感谢您的帮助 【参考方案1】:

我认为在 allow_header 中添加“X-HTTP-Method-Override”可能会解决您在 rails 端编写的问题。所以它会像 allow_headers = 'Origin, Authorization, Accept, Content-Type, X-HTTP-Method-Override'

【讨论】:

派对迟到了,但是你在哪里添加这个?

以上是关于请求的资源上不存在“Access-Control-Allow-Origin”标头:角度和轨道的主要内容,如果未能解决你的问题,请参考以下文章

django中的“请求的资源上不存在'Access-Control-Allow-Origin'标头”

如何解决请求的资源上不存在“Access-Control-Allow-Origin”标头

Http.post 请求的资源上不存在“Access-Control-Allow-Origin”标头

请求的资源发布请求上不存在“Access-Control-Allow-Origin”标头

Angular 2请求的资源上不存在“Access-Control-Allow-Origin”标头[重复]

API 请求错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头