0
私のAngular 2アプリからDjango REST Framework APIにPOSTリクエストをしています。 [OK]を動作するようだが、私は私のアプリで返されたデータを見ると、以下のように、それは予期しないHTMLで構成されています（データを表示するために使用、アラートに示すようにダンプ）：Django REST Frameworkは、アプリからWeb API htmlをPOSTに返します
{"_body":"\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n \n\n \n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n <meta name=\"robots\" content=\"NONE,NOARCHIVE\" />\n \n\n <title>Item List – Django REST framework</title>\n\n \n \n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap.min.css\"/>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap-tweaks.css\"/>\n \n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/prettify.css\"/>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/default.css\"/>\n \n\n \n</head>\n\n\n<body class=\"\">\n\n <div class=\"wrapper\">\n \n <div class=\"navbar navbar-static-top navbar-inverse\">\n <div class=\"container\">\n <span>\n \n <a class='navbar-brand' rel=\"nofollow\" href='http://www.django-rest-framework.org'>\n Django REST framework\n </a>\n \n </span>\n <ul class=\"nav navbar-nav pull-right\">\n \n \n \n \n \n </ul>\n </div>\n </div>\n \n\n <div class=\"container\">\n \n <ul class=\"breadcrumb\">\n \n \n <li><a href=\"/api/\">Api Root</a></li>\n \n \n \n <li class=\"active\"><a href=\"/api/items/\">Item List</a></li>\n \n \n </ul>\n \n\n <!-- Content -->\n <div id=\"content\">\n\n \n <form id=\"get-form\" class=\"pull-right\">\n <fieldset>\n \n <div class=\"btn-group format-selection\">\n <a class=\"btn btn-primary js-tooltip\" href=\"/api/items/\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource\">GET</a>\n\n <button class=\"btn btn-primary dropdown-toggle js-tooltip\" data-toggle=\"dropdown\" title=\"Specify a format for the GET request\">\n <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n \n <li>\n <a class=\"js-tooltip format-option\" href=\"/api/items/?format=json\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `json`\">json</a>\n </li>\n \n <li>\n <a class=\"js-tooltip format-option\" href=\"/api/items/?format=api\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `api`\">api</a>\n </li>\n \n </ul>\n </div>\n \n </fieldset>\n </form>\n \n\n \n <form class=\"button-form\" action=\"/api/items/\" data-method=\"OPTIONS\">\n <button class=\"btn btn-primary js-tooltip\" title=\"Make an OPTIONS request on the Item List resource\">OPTIONS</button>\n </form>\n \n\n \n\n \n\n <div class=\"content-main\">\n <div class=\"page-header\">\n <h1>Item List</h1>\n </div>\n <div style=\"float:left\">\n \n \n \n </div>\n\n \n\n <div class=\"request-info\" style=\"clear: both\" >\n <pre class=\"prettyprint\"><b>POST</b> /api/items/</pre>\n </div>\n\n <div class=\"response-info\">\n <pre class=\"prettyprint\"><span class=\"meta nocode\"><b>HTTP 201 Created</b>\n<b>Allow:</b> <span class=\"lit\">GET, POST, HEAD, OPTIONS</span>\n<b>Content-Type:</b> <span class=\"lit\">application/json</span>\n<b>Location:</b> <span class=\"lit\">fred</span>\n<b>Vary:</b> <span class=\"lit\">Accept</span>\n\n</span>{\n "url": "fred",\n "item_type": "P",\n "title": "",\n "credits_applied": 10,\n "credits_left": 10,\n "credits_gifted": 0,\n "username": "admin",\n "liked": 0,\n "disliked": 0\n}</pre>\n </div>\n </div>\n\n \n\n \n <div class=\"tabbable\">\n \n <ul class=\"nav nav-tabs form-switcher\">\n <li>\n <a name='html-tab' href=\"#post-object-form\" data-toggle=\"tab\">HTML form</a>\n </li>\n <li>\n <a name='raw-tab' href=\"#post-generic-content-form\" data-toggle=\"tab\">Raw data</a>\n </li>\n </ul>\n \n\n <div class=\"well tab-content\">\n \n <div class=\"tab-pane\" id=\"post-object-form\">\n \n <form action=\"/api/items/\" method=\"POST\" enctype=\"multipart/form-data\" class=\"form-horizontal\" novalidate>\n <fieldset>\n <input type='hidden' name='csrfmiddlewaretoken' value='Z42Ygso019oegnf1NPdnCeq6ZoqlyWQN' />\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Url\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"url\" class=\"form-control\" type=\"text\" value=\"fred\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group\">\n \n <label class=\"col-sm-2 control-label \">\n Item type\n </label>\n \n\n <div class=\"col-sm-10\">\n <select class=\"form-control\" name=\"item_type\">\n \n \n \n <option value=\"V\" >Vine</option>\n \n \n \n <option value=\"Y\" >YouTube</option>\n \n \n \n <option value=\"P\" selected >Photo</option>\n \n \n \n <option value=\"F\" >Flickr</option>\n \n \n \n <option value=\"I\" >Instagram</option>\n \n \n \n <option value=\"D\" >DeviantArt</option>\n \n \n \n <option value=\"5\" >500px</option>\n \n \n </select>\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Title\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"title\" class=\"form-control\" type=\"text\" >\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits applied\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_applied\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n <span class=\"help-block\">Total number of credits applied to this item including any given by VeeU admin</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits left\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_left\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n <span class=\"help-block\">The number of credits still remaining to show the item</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Credits gifted\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_gifted\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n <span class=\"help-block\">The number of credits this item has been gifted by other users</span>\n \n </div>\n</div>\n\n \n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Liked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"liked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n Disliked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"disliked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n\n <div class=\"form-actions\">\n <button class=\"btn btn-primary\" title=\"Make a POST request on the Item List resource\">POST</button>\n </div>\n </fieldset>\n </form>\n \n </div>\n \n\n <div class=\"tab-pane\" id=\"post-generic-content-form\">\n \n <form action=\"/api/items/\" method=\"POST\" class=\"form-horizontal\">\n <fieldset>\n \n\n\n <div class=\"form-group\">\n <label for=\"id__content_type\" class=\"col-sm-2 control-label\">Media type:</label>\n <div class=\"col-sm-10\">\n <select data-override=\"content-type\" id=\"id__content_type\" name=\"_content_type\" class=\"form-control\">\n<option value=\"application/json\" selected=\"selected\">application/json</option>\n<option value=\"application/x-www-form-urlencoded\">application/x-www-form-urlencoded</option>\n<option value=\"multipart/form-data\">multipart/form-data</option>\n</select>\n <span class=\"help-block\"></span>\n </div>\n </div>\n\n <div class=\"form-group\">\n <label for=\"id__content\" class=\"col-sm-2 control-label\">Content:</label>明らかに、私はビューとシリアライザで何か間違っていますが、何が見えないのですか。
ビューは次のとおりです。
class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all().order_by('-date_added')
serializer_class = ItemSerializer
def perform_create(self, serializer):
creator = User.objects.get(pk=self.request.data['owner_id'])
serializer.save(owner=creator)
def get_queryset(self):
this_user = self.request.query_params.get('user', None)
restrict_to_items_from_user_id = self.request.query_params.get('from', None)
quantity = self.request.query_params.get('num', 20)
if restrict_to_items_from_user_id is not None:
queryset = Item.objects.filter(owner=restrict_to_items_from_user_id, active=True).order_by('-date_added')[0:int(quantity)]
elif this_user is not None:
queryset = Item.objects.filter(active=True, credits_left__gt=0).exclude(pk__in=Seen.objects.filter(user_id=this_user).values_list('item_id', flat=True))[0:int(quantity)]
else:
queryset = Item.objects.filter(active=True, credits_left__gt=0)[0:int(quantity)]
return querysetシリアライザは、次のとおりです。
class ItemSerializer(serializers.HyperlinkedModelSerializer):
username = serializers.SerializerMethodField()
def get_username(self, obj):
"""
Note that query params can be accessed here as follows:
request = self.context['request']
print request.query_params.get['fields']
"""
value = str(obj.owner)
return value
def get_keywords(self, obj):
value = str(obj.keywords)
return value
class Meta:
model = Item
fields = ('url', 'item_type', 'title', 'credits_applied', 'credits_left', 'credits_gifted', 'username', 'liked', 'disliked')APIコードがGETを発行するとき、私は何を期待し私のアプリからは、POSTが予期しないHTMLを返す理由がわかりません。
別の言い方をすれば、POST後にビュー/シリアライザによって返される内容をどのように判断することができますか。私は、例えばEDIT
など悪い引数についていくつかのデータを追加することができます：ここで POSTのための角度2コードlet body = JSON.stringify({ url: 'fred', item_type: 'P', owner_id: 2, owner: "admin" });
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post('http://127.0.0.1:8000/api/items/',
body, {
headers: headers
})
.subscribe(
data => {
alert('DATA RETURNED: '+JSON.stringify(data));
},
err => alert('POST ERROR: '+err.json().message),
() => alert('POST Complete')
);
これは私が確信できる1つは、Webブラウザー可能なAPIをエンドポイント用にレンダリングしていることです。 – ofnowhere
はい、それは私にも見えるものです。ブラウズ可能なAPIをレンダリングする理由は何ですか？ –
Angular2からあなたのPOSTスクリプトを見ることはできますか？あなたがAPI呼び出しからではなくHTMLフォームから直接POSTingしているようだからです。 –