Posted at

Android 4.x 系ブラウザで URLSearchParams が undefined になる

More than 1 year has passed since last update.

前回 axios で CORS によるクロスドメイン通信するとき という記事を書いたが、検証していたところ一部の Android ブラウザで不具合になったので追記します。


URLSearchParams とは

クエリ文字列を扱う関数(※1)でもダウンブラウザではわりと実装されているようです(※2)。


URLSearchParams が使えない端末(動作確認済)


  • Android v4.0.2 (GALAXY S III SC-06D)


対処法


前回の記事のコード

import axios from "axios";

import {forEach, keys} from "lodash";

let postApi = (path, params, headers) => {
if (!params) {
params = {};
}
let _params = new URLSearchParams();
forEach(keys(params), (val) => {
_params.append(val, params[val]);
});
if (!headers) {
headers = {};
}
return axios({
method: "POST",
url: path,
data: _params,
headers: headers
});
};


変更後

qs を使うとうまく行きました(※3)。

import axios from "axios";

import qs from "qs";
import {forEach, keys} from "lodash";

let postApi = (path, params, headers) => {
if (!params) {
params = {};
}
if (!headers) {
headers = {};
}
return axios({
method: "POST",
url: path,
data: qs.stringify(params),
headers: headers
});
};


余談

polyfill 使えばいいやと思って URLSearchParams の npm インストールして使ったのですが(※4)上記の端末では動きませんでした。


references

(※1) https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

(※2) https://caniuse.com/#search=URLSearchParams

(※3) https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

(※4) https://github.com/WebReflection/url-search-params