離子導軌的CORS問題

我正在嘗試ionic和後端作爲Rails的示例項目。當我使用離子服務，並提交我的樣表啓動離子服務器正在逐漸離子導軌的CORS問題

XMLHttpRequest cannot load http://localhost:3000/signup. 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:8100' is therefore not allowed access. The response had HTTP status code 404.

嘗試了一些我在谷歌了，但無法得到儘管它的答案。下面是我的app.js代碼index.html和ionic.project文件的代碼。

angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.constant('ApiEndpoint', 'http://localhost:3000/') 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('signUp',{ 
    cache: false, 
    url: "/signUp", 
    templateUrl: "templates/signUp.html", 
    controller: 'ExampleCtrl' 
    }) 

    $urlRouterProvider.otherwise("/signUp"); 
}) 

.controller('ExampleCtrl', ['$scope','$http','ApiEndpoint', function ($scope, $http, ApiEndpoint) { 

    $scope.registrationForm = {}; 

    $scope.signUp = function(){ 
    console.log($scope.registrationForm); 
    console.log(ApiEndpoint); 
    $http.post(ApiEndpoint + "signup", {a: 1}).then(function(result){ 
     console.log(result); 
     $scope.registrationForm = {}; 
    }, function(error){ 
     console.log(error); 
     $scope.registrationForm = {}; 
    }) 
    } 
}]) 


<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="starter" animation="slide-left-right-ios7"> 
    <ion-pane> 
     <ion-nav-bar class="nav-title-slide-ios7 bar-stable"> 
     <ion-nav-back-button></ion-nav-back-button> 
     </ion-nav-bar> 
     <ion-nav-view> 
     </ion-nav-view> 
    </ion-pane> 
    </body> 

</html> 

{ 
    "name": "kranthi_web", 
    "app_id": "", 
    "proxies": [ 
    { 
     "path": "/api", 
     "proxyUrl": "http:localhost:3000/" 
    } 
    ] 
}

有人能告訴我，我做錯了，請

來源

2015-12-17 This is me

CORS (Cross Origin Resource Sharing)CORS (Cross Origin Resource Sharing)策略旨在防止針對不同域的資產的XML請求。

基本上，如果您通過XML請求來自不同域/服務器的資源，則需要確保在該服務器上具有相應的CORS策略來處理該策略。

默認情況下，Rails會阻止任何外部XML請求被響應。解決這個問題的唯一方法是通過您自己的CORS策略來允許資源。

的rack-cors寶石是最適合這樣的：

#config/application.rb 
# ... 

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

如果設置上面爲您的域（即本地主機或其他），你應該能夠從您的前端JS訪問你的後端。

...並記住，使用Angular /其他JS類型的框架，你將每次都發送XML請求。

來源

2015-12-17 11:19:01

但我想發送Json請求而不是XML。所以我可以知道應該怎麼辦這種情況請 –

我認爲JSON請求仍將通過XHR請求類型。你應該嘗試我提供的代碼來查看它是否有效。如果它有效，那麼你可以制定出如何使它成爲JSON –

當然。非常感謝！ :-) –

在你的基地控制器，你應該提供Access-Control-Allow-Origin頭。

class Api::BaseController < ActionController::Base 

     before_action :cors_preflight_check 
     after_action :cors_set_access_control_headers 

     protected 

     def cors_preflight_check 
     if request.method == 'OPTIONS' 
      headers['Access-Control-Allow-Origin'] = '*' 
      # ... 
     end 
     end 

     def cors_set_access_control_headers 
     headers['Access-Control-Allow-Origin'] = '*' 
     # ... 
     end 
    end

來源

2015-12-17 11:16:37

離子導軌的CORS問題

回答

相關問題