使用$ resource POST数据

时间:2012-10-24 16:06:59

标签: angularjs

DEMO:http://jsfiddle.net/rob_balfre/7QUUf/

如何使用$ resource发布数据(跨域)?

例如,这个curl写入API没有问题:

curl --dump-header - -H "Content-Type: application/json" -X POST --data '{"name": "Wobbly"}' http://192.168.91.20/api/food/

,标题响应为:

HTTP/1.0 201 CREATED
Date: Thu, 25 Oct 2012 08:19:42 GMT
Server: WSGIServer/0.1 Python/2.6.1
Access-Control-Allow-Headers: Content-Type,*
Location: http://localhost/api/food/15/
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: text/html; charset=utf-8

我完全坚持如何以同样的方式获得角度。这是我的资源,值得注意的是'get'可以正常工作:

angular.module('tastypieModule', ['ngResource']).
factory('FoodOptions', function($resource, $timeout) {
   var FoodOptions = $resource('http://testurl/api/:type',
        {type: 'food'},
        {
            get: {method: 'JSONP', params: {format: 'jsonp', callback:'JSON_CALLBACK'}},
            update: {method: 'POST', headers: {'Content-Type': 'application/json'}}
        }
    );

 return FoodOptions;
})

当我调用更新时,它只是失败,我看到这是控制台网络选项卡:

METHOD: OPTIONS 
STATUS: (canceled) Load cancelled

1 个答案:

答案 0 :(得分:1)

在服务器上,您需要实现跨源资源共享。 http://www.html5rocks.com/en/tutorials/cors/http://omarrr.com/cors-html5-approach-to-crossdomain-policies/都有关于该主题的好文章。 HEAD请求来自浏览器到您的服务器,以检查包含(或在您的情况下,不包含)CORS权限的标头。如果您在服务器上实现CORS,那么您将看到浏览器首先向服务器发出一次HEAD请求,然后在确认正确的权限后,它将进行POST。