Angularjs Rails-产地的http：//本地主机：9000不被访问控制允许来源允许的。 [英] Angularjs Rails- Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

问题描述

我刚开始用angularjs，我使用Rails作为后端的API。我已经成功安装角导轨种源（ https://github.com/FineLinePrototyping/angularjs-rails-resource ）和机架CORS从轨道获取数据。当我尽量存起来的节日，我得到以下错误：

  XMLHtt prequest无法加载的http：//本地主机：3000 /节日。原产地的http：//本地主机：9000不被访问控制允许来源允许的。
 

下面是我的code，

应用程序/脚本/指令/ festival_form.coffee

 使用严格angular.module（'MFNApp'）
  .directivefestivalForm'， - ＆GT;
    返回{
      编译：（范围，元素，属性） -  GT;
        的console.log编译      链接：（范围，元素，属性） -  GT;
        的console.log链接      控制器：（$范围，节） -  GT;
        $ scope.newFestival =新节
        的console.log $ scope.newFestival        $ scope.save =  - ＆GT;
          $ scope.newFestival.save（）。然后（
            （节） -  GT;
              的console.log'成功'
              ＃$ scope.festivalForm。$ setPristine（）
              ＃$ scope.newFestival $脏= FALSE
            ，
            （响应） - ＆GT;
              的console.log失败
              ＃$ scope.festivalForm。$ setValidity（假）
              ＃angular.forEach response.data，（值，键） -  GT;
              ＃$ scope.festivalForm。$错误[关键] =值[0]
          ）    }
 

下面是这个节日的工厂采用了棱角分明轨道资源

应用程序/脚本/服务/ Festival.coffee

 使用严格angular.module（'MFNApp'）
  .factory'节'，（railsResourceFactory） -  GT;
    railsResourceFactory
      网址：的http：//本地主机：3000 /的节日，
      名称：'节日'
 

这里是观

应用程序/视图/ fesitvals / new.html

 ＆LT; D​​IV节日形式＆GT;
  ＆LT;形式为GT;
    ＆LT;＆字段集GT;
      ＆LT;传奇＆GT;节后信息与LT; /传说＆GT;      ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =大12列＆GT;
          ＆LT;标签＆gt;节庆名称和LT; /标签＆gt;
          ＆LT;输入NG-模式='newFestival.name类型=文本占位符=你的节日名称......＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;      ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =大12列＆GT;
          ＆LT;标签＆gt;说明与LT; /标签＆gt;
          ＆LT;输入NG-模式='newFestival.description类型=文本占位符=关于您的节日......＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;      ＆LT;按钮NG点击='保存（）＆GT;保存＆LT; /按钮＆GT;
    ＆LT; /字段集＆GT;
  ＆LT; /表及GT;＆LT; / DIV＆GT;
 

解决方案

错误是有点误导，因为它似乎是一个跨起源请求错误。它实际上只是在轨控制器错误。所以，如果你曾经挂钩轨作为后端角度和遇到这个错误，它可能仅仅是不正确轨道code。希望这有助于！

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>

解决方案

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!

这篇关于Angularjs Rails-产地的http：//本地主机：9000不被访问控制允许来源允许的。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！