1

I just started out with angularjs and I am using rails as a backend api. I have successfully setup angular rails resouce (https://github.com/FineLinePrototyping/angularjs-rails-resource) and rack cors to get data from rails. When I try to save a festival though, I get the following error:

XMLHttpRequest cannot load http://localhost:3000/festivals. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

Here's my code,

app/scripts/directives/festival_form.coffee

'use strict'

angular.module('MFNApp')
  .directive 'festivalForm', ->
    return {
      compile: (scope, element, attributes) ->
        console.log 'compile'

      link: (scope, element, attributes) ->
        console.log 'link'

      controller: ($scope, Festival) ->
        $scope.newFestival = new Festival
        console.log $scope.newFestival

        $scope.save = ->
          $scope.newFestival.save().then(
            (festival) ->
              console.log 'success'
              # $scope.festivalForm.$setPristine()
              # $scope.newFestival.$dirty = false
            ,
            (response) ->
              console.log 'failure'
              # $scope.festivalForm.$setValidity(false)
              # angular.forEach response.data, (value, key) ->
              #   $scope.festivalForm.$error[key] = value[0]
          )

    }

Here's the festival factory using angular rails resource

app/scripts/services/Festival.coffee

'use strict'

angular.module('MFNApp')
  .factory 'Festival', (railsResourceFactory) ->
    railsResourceFactory
      url: 'http://localhost:3000/festivals', 
      name: 'festival'

And here is the view

app/views/fesitvals/new.html

<div festival-form>
  <form>
    <fieldset>
      <legend>Festival Information</legend>

      <div class="row">
        <div class="large-12 columns">
          <label>Festival Name</label>
          <input ng-model='newFestival.name' type="text" placeholder="Name of your festival...">
        </div>
      </div>

      <div class="row">
        <div class="large-12 columns">
          <label>Description</label>
          <input ng-model='newFestival.description' type="text" placeholder="About your festival...">
        </div>
      </div>

      <button ng-click='save()'>Save</button>


    </fieldset>
  </form>

</div>
Blaine Hatab
  • 1,626
  • 17
  • 24
  • When requesting pages with JavaScript, you have to make sure the ports match, if your web server is running at port 9000, it will only accept pages from port 9000. Same goes for domains and protocols – Jamie Taylor Sep 25 '13 at 15:52
  • 1
    Yes they need to match, but I am using rails as an api. That means I need to run the rails server separately and need to allow them talk nicely to each other. I have a rough understanding of the subject so I could definitely be wrong. – Blaine Hatab Sep 25 '13 at 18:53

2 Answers2

0

You have to allow the web api to accept requests from that domain (http://localhost:9000) or you can open it up for all domains as described here Allow anything through CORS Policy

Community
  • 1
  • 1
kubuntu
  • 2,525
  • 1
  • 22
  • 24
  • Hmmmm. I feel like I did allow the web api to accept requests using the rack-cors gem (https://github.com/cyu/rack-cors). The rack-cors gem must be working too because I am able to get the index of the festivals with angular. I just can't create a festival with angular. – Blaine Hatab Sep 25 '13 at 18:55
  • @BlaineHatab What is the request header from angular like? Is the method post? – kubuntu Sep 25 '13 at 23:50
0

The error was a little misleading, because it seemed to be a cross origin request error. It was actually just an error in the rails controller. So if you ever hook up rails as a backend to angular and encounter this error, it could just be incorrect rails code. hope this helps!

Blaine Hatab
  • 1,626
  • 17
  • 24