CORS issue in ionic with rails

Question

I'm trying a sample project with ionic and backend as Rails . When I start ionic server using ionic serve and submit my sample form am getting

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.

Tried some of the answers which I got in google but couldn't get though it. Below is my app.js code index.html and ionic.project files code.

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/"
    }
  ]
}

Can someone tell me where am I doing wrong please

Answer 1

CORS (Cross Origin Resource Sharing) policies are designed to prevent XML requests for different domains' assets.

Basically, if you're requesting a resource from a different domain/server through XML, you'll need to make sure you have the respective CORS policy on that server to handle it.

Rails, by default, prevents any external XML request from being responded to. The only way to fix it is to allow the resource through your own CORS policies.

The rack-cors gem is the best for this:

#config/application.rb
# ...

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

If you set the above for your domain (IE localhost or whatever), you should be able to access your backend from your front-end JS.

... and remember that using Angular / other JS type framework, you're going to be sending XML requests every time.

Answer 2

In your base controller you should provide the Access-Control-Allow-Origin header.

   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

CORS issue in ionic with rails

Question

2 answers

solution1
5 ACCPTED 2015-12-17 11:19:01

solution2
1 2015-12-17 11:16:37

CORS issue in ionic with rails

Question

2 answers

solution1 5 ACCPTED 2015-12-17 11:19:01

solution2 1 2015-12-17 11:16:37

solution1
5 ACCPTED 2015-12-17 11:19:01

solution2
1 2015-12-17 11:16:37