前提・実現したいこと
monacaでログイン時の情報をPOSTして取得する箇所を制作しているのですが、
自分で書いたAngularJSでの記述ではうまく取得することができませんでした。
XMLHttpRequestを使用してPOSTするとちゃんと返ってくるのですが、
AngularJSでの記述方法がいまいち調べてもわからなかったので質問させていただいております。
headdersの記述がおかしいのか、
そもそも正しい記述がどういうものなのか
調べたのですがピンとくるような記述がなく、打開策が見つからない状況です。
該当のソースコード
JavaScript
1//AngularJSでの記述はエラーが返ってくる 2app.controller('httpController', ['$scope', '$http', function($scope, $http){ 3 var url ="https://hogehogehoge"; 4 var data = { 5 dataA : "dataA", 6 dataB : "dataB", 7 dataC : "dataC" 8 }; 9 var parseData = JSON.stringify(postData); 10 var conf = { 11 headers: { 12 "Content-Type": "application/json; charset=utf-8", 13 "Authorization": "Token token=sampleToken" 14 }, 15 }; 16 $http.post(url, parseData, conf) 17 .success(function(data, status, headers, config){ 18 $scope.response = [data, status, headers, config]; 19 }) 20 .error(function(data, status, headers, config){ 21 $scope.response = [data, status, headers, config]; 22 }); 23}]);
発生している問題・エラーメッセージ
$http.post(url, parseData, conf) .success is not a function. (In '$http.post(url, parseData, conf) .success(function(data, status, headers, config){ $scope.response = [data, status, headers, config]; })', '$http.post(url, parseData, conf) .success' is undefined)
Possibly unhandled rejection: { "data":"", "status":406, "config":{ "method":"POST", "transformRequest":[null], "transformResponse":[null], "jsonpCallbackParam":"callback", "headers":{ "Content-Type":"application/json; charset=utf-8", "Authorization":"Token token=sampleToken", "Accept":"application/json, text/plain, */*" }, "url":"https://hogehogehoge", "data":"{ \"dataA\":\"dataA\", \"dataB\":\"dataB\", \"dataV\":\"dataC\" }" }, "statusText":"Not Acceptable", "xhrStatus":"complete" }
試したこと
XMLHttpRequestを使用して記述した場合はうまく情報を取得することができました。
JavaScript
1//XMLHttpRequestではうまくいく 2function hoge() { 3 var data = { 4 dataA : "dataA", 5 dataB : "dataB", 6 dataC : "dataC" 7 }; 8 var url ="https://hogehogehoge"; 9 var parseData = JSON.stringify(data); 10 var request = new XMLHttpRequest(); 11 request.onreadystatechange = function () { 12 var READYSTATE_COMPLETED = 4; 13 var HTTP_STATUS_OK = 200; 14 if( this.readyState == READYSTATE_COMPLETED 15 && this.status == HTTP_STATUS_OK ) { 16 var resText=request.responseText; 17 var resArr = JSON.parse(resText); 18 } 19 } 20 request.open('POST', url); 21 request.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); 22 request.setRequestHeader('Authorization', 'Token token=sampleToken'); 23 request.send(parseData); 24};
補足情報(FW/ツールのバージョンなど)
質問の内容がおかしいかどうかもわかっていない状況ではございますが、
なにとぞよろしくお願いいたします。
追記 2018/05/22
406エラーになっていた部分も解決しましたので記入しておきます。
headersに記載している部分以外にデフォルトで記載される部分がありました。
$http | AngularJS 1.2 日本語リファレンス
$httpProvider.defaults.headers.common(全てのリクエストで共通): Accept: application/json, text/plain, * / *
上記の「/」の部分でエラーが起きていまして、それを削除したら
エラーが完全になくなり、期待したレスポンスが返ってきました。
※完全に自己解決ではないのでこちらに記入しております。
JavaScript
1app.controller('httpController', ['$scope', '$http', function($scope, $http){ 2 var url ='https://hogehogehoge'; 3 var data = { 4 dataA : "dataA", 5 dataB : "dataB", 6 dataC : "dataC" 7 }; 8 var parseData = JSON.stringify(data); 9 var conf = { 10 headers : { 11 "Content-Type":"application/json; charset=utf-8", 12 "Authorization": "Token token=sampleToken" 13 } 14 }; 15 16 //406エラー回避のためにこの記述が必要だった 17 delete $http.defaults.headers.common.Accept; 18 19 $http.post(url, parseData, conf) 20 .then(function(request){ 21 $scope.response = request; 22 }, 23 function(request){ 24 $scope.response = request; 25 }) 26}]);
回答1件
あなたの回答
tips
プレビュー