AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST できません><

スポンサードリンク


追記。問題解決できました!

以下、追記前の本文です♪

  1. 【Nginx】Basic 認証をかける方法手順メモ | oki2a24
  2. cURL を使って Basic 認証が必要な PHP へ JSON データを POST する手順メモ | oki2a24
  3. AngularJS を使って PHP へ JSON データを POST する方法 | oki2a24

と試行錯誤してまいりました。これらに続きまして、AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST する方法を探っております!

できませんの><。

今回はせめてどのような結果となったのか、残しておきますの><。

条件など

  • http://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 = "http://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 ソースで指定した、http://oki2a24.com/basictest/json.php のコードです。

<?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:http://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 http://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.

以上のスクリーンショットです。

AngularJS の HTML 側。リクエストとレスポンス、JavaScript コンソール出力結果

比較。Basic 認証が通った時の HTML 結果

結果で気になったことは、次の Basic 認証が通った時の結果と比べておりますの。なお、JavaScript コンソールには特になにも出力されておりませんでした。

▼General
Remote Address:27.120.110.175:80
Request URL:http://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 を使って Basic 認証が必要な PHP へ JSON データを POST できません><” への1件の返信

コメントを残す