ruby-on-rails - 已完成 401 未授权请求被重定向到该请求对于需要预检的跨域请求是不允许的

Question

这个问题可能听起来像重复，但我已经尝试了有关 stackoverflow 的其他类似问题中的所有步骤，但都没有奏效。我正在尝试使用 ionic 连接到 Rails API。

我的设置是
Rails 4，用于身份验证的设计，用于基于 token 的 API 请求的 simple_token_authentication gem 和用于移动应用程序的 ionic。

我可以通过将带有正确用户名和密码的登录请求传递给设计 session Controller api 并在通过设计 api 成功登录后获取 token 来从 ionic 登录。

之后，当我尝试使用访问 token 通过 get 查询访问任何 Controller 的索引时:
http://localhost:3002/api/categories?token=1098ccee839952491a4或 http://localhost:3002/api/employers?token=1098ccee839952491a4

响应是设计的登录页面。在rails日志中，它显示

Started GET "/api/categories?token=1098ccee839952491a43" for ::1 at 2016-06-17 17:45:55 +0530
Processing by Api::CategoriesController#index as HTML
  Parameters: {"token"=>"1098ccee839952491a43"}
  User Load (0.7ms)  SELECT `users`.* FROM `users` WHERE `users`.`authentication_token` = '1098ccee839952491a43'
Completed 401 Unauthorized in 3ms (ActiveRecord: 0.7ms)


Started GET "/users/sign_in" for ::1 at 2016-06-17 17:45:55 +0530
Processing by Devise::SessionsController#new as HTML
  Rendered devise/shared/_links.html.erb (6.5ms)
  Rendered devise/sessions/new.html.erb within layouts/login (78.3ms)
Completed 200 OK in 3850ms (Views: 3847.1ms | ActiveRecord: 0.0ms)

我确定 token 是正确的，因为我已经交叉检查了数据库中的 token 。此外，我还包含了 rack-cors gem 及其配置，以允许跨域请求的任何来源。

在我的 application.rb 中，cors 条目如下所示

class Application < Rails::Application
    config.active_record.raise_in_transactional_callbacks = true

    config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

  end

ionic 中controllers.js 中的GET 请求如下所示:-

 $http({
        method: 'GET',
        headers: 
         {
            'X-XSRF-TOKEN': window.localStorage.getItem("token") ,
         },
        url: config.apiUrl+"/categories?token="+window.localStorage.getItem("token") ,
            }).then(function successCallback(response) {
                                console.log(response);

              }, function errorCallback(response) {
                $ionicPopup.alert({
                    title: 'Alert',
                    template: response.data.message,
                });
              });   

请求发起后，Chrome 开发者控制台显示如下信息

XMLHttpRequest cannot load http://localhost:3002/api/categories?token=1098ccee839952491a43. The request was redirected to 'http://localhost:3002/users/sign_in', which is disallowed for cross-origin requests that require preflight.

我从服务器得到的响应头是

一般

Request URL:http://localhost:3002/api/categories?token=1098ccee839952491a43
Request Method:GET
Status Code:302 Found
Remote Address:[::1]:3002

响应头

view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:http://localhost:8100
Access-Control-Expose-Headers:
Access-Control-Max-Age:1728000
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:101
Content-Type:text/html; charset=utf-8
Date:Fri, 17 Jun 2016 12:26:13 GMT
Location:http://localhost:3002/users/sign_in
Server:WEBrick/1.3.1 (Ruby/2.2.1/2015-02-26)
Set-Cookie:_backend_session=c05LRTgzdXNVdGNFeHcwaDNtRDkxZ1RBbXFNaDFNbE1zMTV6OGhFZG1VODdON2k4ODN0ZTg3YXo5OU5hOTZkcUNmR3VTaGVRQzBOUElCNnMrODhnemVCbUhQbUs2azNHdmVnbFpoL2JiRDA5S1I4NCtsVWNhOEpqeDdoYWxXR3hHNDg5RzNRcUlpcDZ4QWswY2NmUlpYbUkvTnpaVEViNXh6ZExCZkNyTXA0allMcW1RVGg1MjRLVnpEbzlSSVk4dGRUSTNsTUZFNEFOcVJxdm1hWXNaSFEzdnlSN01DZ2FTdEJYUTdUUGxucU44cFBMbDZ6RXlhVUx2ZHArWlNCVWgyTWs2emRrSXNGbTQ3ZVVQL0NCR0E9PS0tbmFzajFXZnZnd25oUkRFRjhxSy81QT09--281b2bd6413653ca006abc80f13329d6bf3ad0f5; path=/; HttpOnly
Vary:Origin
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:3097ec28-6d55-4c70-90c9-de221b4321e3
X-Runtime:0.021444
X-Xss-Protection:1; mode=block

请求头

view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:localhost:3002
Origin:http://localhost:8100
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36
X-XSRF-TOKEN:1098ccee839952491a43

Answer 1

尝试这个

app.config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain.  Notice the difference between * and **.
    'http://localhost:3002/**'
  ]);

});

浏览器会自动阻止来自您需要允许域的陌生人 url 的资源。