投稿者: oki2a24

AngularJS でサーバに JSON をポストしたところエラーとなった。
- フロント側では、Access-Control-Allow-Origin のエラーが発生していた。
- サーバ側では method が POST ではなく、OPTIONS となっていた。
クロスドメイン問題が原因だった。
- ちなみに、異なるドメインのデータにアクセスすることを、クロスドメインという。
フロント側、サーバ側の両方で対応する必要がある。
- フロント側では、config で $httpProvider の Content-Type で x-www-form-urlencoded を設定する。
- サーバ側では、header(‘Access-Control-Allow-Origin: *’); を設定してやる。

エラーが発生した AngularJS のコード抜粋

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 を指定すれば良い。

公式ページ → JSON
JavaScript Object Notation → JSON
データ転送フォーマット
実態としては単なるテキスト
JSON は「名前」と「値」でデータを扱う。名前と値はセミコロンで区切る。
- 名前は、名前の他にメンバー、キー、プロパティなどとも呼ばれる印象
- 値は、値またはバリューと呼ばれる印象
名前は、二重引用符「”」で囲む。
値の種類
- 文字列。二重引用符「”」で囲む。
- 数字。
- true、もしくは、false。いわゆる boolean
- null
- オブジェクト。JSON では名前と値のペアの集合を挿す。
- 配列
データの構造は配列 [] とオブジェクト {} で定義
JSON では二重引用符、ダブルクオーテーション「”」のみが許される。「’」は使用不可。

ネイティブ JSON を使う | MDN
JSON.parse() メソッド → JSON.parse() – JavaScript | MDN
- JSON データから JavaScript オブジェクトへ変換する。つまり、JSON フォーマットで記述された文字列を、JavaScript オブジェクトへ変換する。
- JSON データを作りたいときは、オブジェクトを作り、それから JSON.parse() メソッドで変換する。
JSON.stringify() メソッド → JSON.stringify() – JavaScript | MDN
- JavaScript オブジェクトを JSON データにシリアライズする。つまり、JavaScript オブジェクトを JSON フォーマットの文字列に変換する。
- 受け取った JSON データからメンバーの値を取得したいときは、JSON.stringify() メソッドで JavaScriptのオブジェクトに変換し、そのオブジェクトから値を取得する。
JSON データでは関数や正規表現リテラルは使用できない。よって、JSON.stringify() メソッドを通すと関数は除去され、それ以外の部分が JSON データへと変換される。
JSON – JavaScript | MDN