2017年5月 – ページ 2 – 東京発、雲に乗って

var _form_data = new FormData();
var _q = location.search.replace('?', '');
var _qs = _q.split('&');
var _param_tmp1 = {};
// 同名パラメータが2つ以上あるかどうかをカウントするループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = _qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]]) {
      _param_tmp1[_kv[0]]++;
    }
    else {
      _param_tmp1[_kv[0]] = 1;
    }
  }
}
// カウントが2つ以上なら後ろに[]をつけるループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]] == 1) {
      _form_data.append(_kv[0], _kv[1]);
    }
    else {
      _form_data.append(_kv[0] + '[]', _kv[1]);
    }
  }
}

var _form_data = new FormData();

var _q = location.search.replace('?', '');

var _qs = _q.split('&');

var _param_tmp1 = {};

// 同名パラメータが2つ以上あるかどうかをカウントするループ

for(var i = 0; i < _qs.length; i++) {

var _kv = _qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]]) {

_param_tmp1[_kv[0]]++;

}

else {

_param_tmp1[_kv[0]] = 1;

}

// カウントが2つ以上なら後ろに[]をつけるループ

for(var i = 0; i < _qs.length; i++) {

var _kv = qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]] == 1) {

_form_data.append(_kv[0], _kv[1]);

}

else {

_form_data.append(_kv[0] + '[]', _kv[1]);

}

2017年5月2日

【Ajax】通信メソッドが勝手にOPTIONSになったら

以下のような条件でAjax通信を行うと、ブラウザは自動的に「プリフライト」と呼ばれる通信チェックを行います。

・クロスドメインである
・独自にリクエストヘッダを追加している

1 2	・クロスドメインである・独自にリクエストヘッダを追加している

プリフライトは通信メソッド「OPTIONS」でサーバーに通信を行い、

・クロスドメインのアクセスが許可されているか
・追加したリクエストヘッダが許可されているか

1 2	・クロスドメインのアクセスが許可されているか・追加したリクエストヘッダが許可されているか

をチェックします。
このチェックをパスしなかった場合はそこで処理は終了し、本来のGETやPOSTの通信が行われませんので

「あれ、POSTしたのになんでOPTIONSになってるんだ？」

と混乱してしまいますよね。

ちなみにサーバー側でクロスドメインを許可するには
レスポンスヘッダにAccess-Control-Allow-Originを設定し、許可するドメインを指定します。
PHPの場合ですべてのドメインを許可するなら

header('Access-Control-Allow-Origin: *');

1	header('Access-Control-Allow-Origin: *');

のようになります。

また、独自のリクエストヘッダを許可するには
レスポンスヘッダにAccess-Control-Allow-Headersを設定し、許可するヘッダを指定します。

header('Access-Control-Allow-Headers: '
  . 'Origin, '
  . 'X-Requested-With, '
  . 'Content-Type, '
  . 'Accept, '
  . '(独自のヘッダ1), '
  . '(独自のヘッダ2), '
  . '(独自のヘッダ3), '
);

header('Access-Control-Allow-Headers: '

. 'Origin, '

. 'X-Requested-With, '

. 'Content-Type, '

. 'Accept, '

. '(独自のヘッダ1), '

. '(独自のヘッダ2), '

. '(独自のヘッダ3), '

);

こんな感じです。