タグ: Basic認証

AngularJS を使って Basic 認証が必要な PHP へ JSON データを POST するサンプルコード！

AngularJS では $http のヘッダーに ‘Content-Type’: ‘application/x-www-form-urlencoded’ を追加する。しかし、Basic 認証をはじめ、カスタムヘッダーを追加する場合、この Content-Type 追加は意味が無い。
サーバでは、プリフライトリクエストがあった場合に対応する次のヘッダーをレスポンスに含めるようにする。
- Access-Control-Allow-Origin:* ← 許可する接続元（* はどこからでも受け入れる）
- Access-Control-Allow-Methods ← 許可するメソッド（POST など）
- Access-Control-Allow-Headers ← 許可するヘッダー（authorization や独自のカスタムヘッダーなど）

ブラウザは、アクセスしたページ以外のドメインから何かを取ってくることを制限している。基本的にはできないようになっている。
そのため、たとえば次のようなことができない。ローカルホスト上のウェブサーバに AngularJS のサンプルを置いたとする。ページのボタンを押したら、とあるサイトからデータを取ってきて表示する。
ローカルホストドメインと、とあるサイトのドメインは異なる。ウェブブラウザでローカルホストのページを表示している。そのため、別ドメインであるとあるサイトのデータへのアクセスは制限される。
これは、セキュリティ上の観点から施された、ブラウザの仕様

Linux

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

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

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

できませんの＞＜。

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

Linux

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

追記終わり！

次のページを参考に準備いたしました。Nginx の設定内容や、JSON を扱う PHP の内容はすべてコピーで作ることができました。

次のようなテスト環境といたしましたの。

Linux

追記。「ログインページを介さず Basic 認証」シリーズの投稿一覧です♪

追記終わり！

nginx で Basic 認証をかけたいですの。まずは、静的な HTML ファイルと簡単な PHP ファイルを表示いたします。

その準備、手順を記していきますわ♪

ユーザ名、パスワードを生成するのは nginx とは別のコマンド「htpasswd」を使用すると便利
「htpasswd」は httpd がインストールされていれば使用可能。使えず、Apache をインストールする必要もなければ「httpd-tools」を yum でインストールすると良いとのこと。
Basic 認証をかけるには nginx 設定ファイルに「location パス」のディレクティブに auth_basic、auth_basic_user_file を指定すれば良い。