title: Angularjs Rails- Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.
body: <p>I just started out with angularjs and I am using rails as a backend api. I have successfully setup angular rails resouce (<a href="https://github.com/FineLinePrototyping/angularjs-rails-resource" rel="nofollow">https://github.com/FineLinePrototyping/angularjs-rails-resource</a>) and rack cors to get data from rails. When I try to save a festival though, I get the following error:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:3000/festivals. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. 
  </code></pre>
  
  <p>Here's my code,</p>
  
  <p>app/scripts/directives/festival_form.coffee</p>
  
  <pre><code>'use strict'
  
  angular.module('MFNApp')
    .directive 'festivalForm', -&gt;
      return {
        compile: (scope, element, attributes) -&gt;
          console.log 'compile'
  
        link: (scope, element, attributes) -&gt;
          console.log 'link'
  
        controller: ($scope, Festival) -&gt;
          $scope.newFestival = new Festival
          console.log $scope.newFestival
  
          $scope.save = -&gt;
            $scope.newFestival.save().then(
              (festival) -&gt;
                console.log 'success'
                # $scope.festivalForm.$setPristine()
                # $scope.newFestival.$dirty = false
              ,
              (response) -&gt;
                console.log 'failure'
                # $scope.festivalForm.$setValidity(false)
                # angular.forEach response.data, (value, key) -&gt;
                #   $scope.festivalForm.$error[key] = value[0]
            )
  
      }
  </code></pre>
  
  <p>Here's the festival factory using angular rails resource</p>
  
  <p>app/scripts/services/Festival.coffee</p>
  
  <pre><code>'use strict'
  
  angular.module('MFNApp')
    .factory 'Festival', (railsResourceFactory) -&gt;
      railsResourceFactory
        url: 'http://localhost:3000/festivals', 
        name: 'festival'
  </code></pre>
  
  <p>And here is the view </p>
  
  <p>app/views/fesitvals/new.html</p>
  
  <pre><code>&lt;div festival-form&gt;
    &lt;form&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Festival Information&lt;/legend&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="large-12 columns"&gt;
            &lt;label&gt;Festival Name&lt;/label&gt;
            &lt;input ng-model='newFestival.name' type="text" placeholder="Name of your festival..."&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="large-12 columns"&gt;
            &lt;label&gt;Description&lt;/label&gt;
            &lt;input ng-model='newFestival.description' type="text" placeholder="About your festival..."&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button ng-click='save()'&gt;Save&lt;/button&gt;
  
  
      &lt;/fieldset&gt;
    &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>