追記。問題解決できました！
以下、追記前の本文です♪
- 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
- cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
- AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24
と試行錯誤してまいりました。これらに続きまして、AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST する方法を探っております！
できませんの＞＜。
今回はせめてどのような結果となったのか、残しておきますの＞＜。
条件など
- https://oki2a24.com/basictest/json.php へ JSON を POST
- Basic 認証のユーザ名: basicuser、パスワード: basicpass
- 正常時のレスポンス: {“response”:”OK”}
書いた AngularJS コード
- ヘッダーに追加した Basic 認証の文字列は、「ユーザ名:パスワード」を BASE64 エンコードしたもの
- application/x-www-form-urlencoded をヘッダーに追加してクロスドメイン問題に対処
<!doctype html>
<html ng-app="httpApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var httpApp = angular.module('httpApp',[]);
httpApp.config(function($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;application/json;charset=utf-8';
});
httpApp.controller('SendController', ['$scope', '$http', function($scope, $http) {
$scope.dog = {
name: "Fido",
dob: new Date(),
legs: [1, 2, 3, 4]
};
var url = "https://oki2a24.com/basictest/json.php",
config = {
headers: {
'Authorization': 'Basic YmFzaWN1c2VyOmJhc2ljcGFzcw=='
},
timeout: 5000
};
$scope.send = function() {
$http.post(url, $scope.dog, config).
success(function(data, status) {
$scope.data = data;
$scope.status = status;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
}
}]);
</script>
</head>
<body>
<div ng-controller="SendController">
<h2>送信データ</h2>
{{dog}}
<ul>
<li>{{dog.name}}</li>
<li>{{dog.dob}}</li>
<li>{{dog.legs}}</li>
</ul>
<h2>送信</h2>
<button ng-click="send()">送信</button>
<h2>結果</h2>
<ul>
<li>{{data}}</li>
<li>{{status}}</li>
</ul>
</div>
</body>
</html>
サーバ側のコード
AngularJS の HTML ソースで指定した、https://oki2a24.com/basictest/json.php のコードです。
- JSON の Request が POST されているかを確認するだけの簡単な PHP | oki2a24 を参考に作成
- header(‘Access-Control-Allow-Origin: *’); を追加してクロスドメイン問題に対処
<?php
header('Access-Control-Allow-Origin: *');
$json_string = file_get_contents('php://input');
ob_start();
var_dump(json_decode($json_string));
$out = ob_get_contents();
ob_end_clean();
file_put_contents('recieved_json.txt', $out);
// レスポンス header 関数無くてもレスポンスできたが、Volley だからなのかどうかは不明
header("HTTP/1.1 200 OK");
header("Status: 200");
header("Content-Type: application/json; charset=utf-8");
header('X-Content-Type-Options: nosniff');
$response = array('response' => 'OK');
echo json_encode($response);
結果。AngularJS の HTML 側。リクエストとレスポンス、JavaScript コンソール出力をそれぞれ確認
ヘッダーは次のようになりました。
- General の Request Method:OPTIONS となっているのが気になる。Request Headers では Access-Control-Request-Method:POST なのに。
- Request Headers に Authorization:Basic が無いのが気になる。Access-Control-Request-Headers:accept, authorization, content-type に authorization があるが。。。
▼General Remote Address:27.120.110.175:80 Request URL:https://oki2a24.com/basictest/json.php Request Method:OPTIONS Status Code:401 Unauthorized ▼Response Headers view source Connection:keep-alive Content-Length:590 Content-Type:text/html Date:Thu, 30 Jul 2015 11:43:16 GMT Server:nginx WWW-Authenticate:Basic realm="Basic Test" ▼Request Headers view source Accept:*/* Accept-Encoding:gzip, deflate, sdch Accept-Language:ja,en-US;q=0.8,en;q=0.6 Access-Control-Request-Headers:accept, authorization, content-type Access-Control-Request-Method:POST Connection:keep-alive Host:oki2a24.com Origin:null User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
そして JavaScript のコンソールです。
XMLHttpRequest cannot load https://oki2a24.com/basictest/json.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.
以上のスクリーンショットです。
比較。Basic 認証が通った時の HTML 結果
結果で気になったことは、次の Basic 認証が通った時の結果と比べておりますの。なお、JavaScript コンソールには特になにも出力されておりませんでした。
▼General Remote Address:27.120.110.175:80 Request URL:https://oki2a24.com/basictest/json.php Request Method:GET Status Code:200 OK ▼Response Headers view source Access-Control-Allow-Origin:* Connection:keep-alive Content-Encoding:gzip Content-Type:application/json; charset=utf-8 Date:Tue, 28 Jul 2015 13:35:02 GMT Server:nginx Transfer-Encoding:chunked Vary:Accept-Encoding X-Content-Type-Options:nosniff ▼Request Headers view source Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip, deflate, sdch Accept-Language:ja,en-US;q=0.8,en;q=0.6 Authorization:Basic YmFzaWN1c2VyOmJhc2ljcGFzcw== Cache-Control:max-age=0 Connection:keep-alive Host:oki2a24.com Upgrade-Insecure-Requests:1 User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
結果。サーバ側のログ
method が OPTIONS となっており、クロスドメイン問題が解決できていないように思えます＞＜。
# tail -20f /var/log/nginx/access.log | grep basictest 999.158.2.78 - - [30/Jul/2015:20:43:16 +0900] "OPTIONS /basictest/json.php HTTP/1.1" 401 590 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36" "-"
比較。AngularJS から正常に POST できた時のサーバログ
AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24 の結果1の修正の部分からの抜粋です。
OPTION とならずに POST となっております。また、2回ログが出ています。
999.158.2.78 - - [27/Jul/2015:23:13:50 +0900] "POST /basictest/json.php HTTP/1.1" 200 48 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36" "-" unix: - - [27/Jul/2015:23:13:50 +0900] "POST /basictest/json.php HTTP/1.0" 200 37 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36" "999.158.2.78"
おまけ。ログ確認用コマンド
# tail -f /var/log/nginx/access.log | grep basictest
おわりに。参考ページ
- AngularJS: API: $http
- ブログ（プッシュ通知マーケティングとアプリ開発）（AngularJSでBasic認証を通しつつ、Post通信）ーニーロク
- データ変換ツール（BASE64, URLエンコード(URLデコード), HEX(16進ダンプ), MD5, SHA-1変換フォーム）
- PHPを利用したBasic認証の仕組み – Qiita
うーん。あとは何を試せるかしら？少し行き詰まっておりますわね。散歩でもしてこようかしら。
以上です。
「AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません＞＜」への1件の返信
[…] 前回からの違いです。↓ […]