axiosでEUCJPでフォーム送信したい。

内容変更

下記のコードのss_keyにはマルチバイト文字が入り、実際のフォーム送信ではchromeでFormDataを確認すると、
(unable to decode value)となるのですが、JSにてpost送信を行うとマルチバイト文字のキーがそのまま表示されます。
これが原因でJSからのフォーム送信がはじかれている可能性があるのですが同じような挙動にできないでしょうか。

let fd = new FormData();

let ss_key = 'カラー';
let ss_value = '黒';

fd.append(ss_key, ss_value);

let res2 = await axios({
  method: 'post',
  url: 'https://example.com/cart-form',
  headers: {
    accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
    'Content-Type': 'application/x-www-form-urlencoded; charset=EUC-JP',
  },
  data: fd,
});

行動規範の内容に同意します

回答1件

formdataで処理する限りエンコードは気にする必要はないと思いますが・・・

javascript
1const method="post";
2const body=new FormData();
3body.append('a','てすと');
4fetch(url,{method,body}).then(res=>res.text()).then(console.log);

投稿2020/10/01 00:48

yambejp

総合スコア114747

Anon_

2020/10/01 01:06

ごめんなさい、URLSearchParams()だとどうでしょうか？

Anon_

2020/10/01 01:07

ちなみに、appendするキーのほうがマルチバイト文字(日本語)です。

yambejp

2020/10/01 01:19

getでマルチバイトのキーは微妙ですねいちおうこんなんで動きますが const obj={"ほげ":"こんにちは","ふが":"こんばんは"}; const params=Object.entries(obj).reduce((x,y)=>(x.append(y[0],y[1]),x),new URLSearchParams()); const method="get"; fetch(url+"?"+params,{method}).then(res=>res.text()).then(console.log);

Anon_

2020/10/01 04:30

ありがとうございます。ちょっといろいろ試してみます。

Anon_

2020/10/01 06:01

ちなみにchromeで確認するとキーがマルチバイトの場合は(unable to decode value)と表示されるはずなのですが、下記のようにエンコードをかけると単に文字化けしてしまいます。 fd.append(Encoding.convert(ss_key, 'EUCJP'), Encoding.convert(ss_value, 'EUCJP')); かといって何もエンコードなしにpostするとunable to decode valueではなく普通にキーと値が表示され、実際のフォームとは違う値がpostされる形になってしまいます。

yambejp

2020/10/01 06:41

呼び出し元がちゃんとEUC設定になっていれば私の例示したサンプルなら文字化けせずに得られるはずですが？とりあえずURLSearchParamsをfdという特徴的な変数に受けると URLSearchParamsなのかFormDataなのか判断つきづらくて混乱します

Anon_

2020/10/01 07:09 編集

URLSearchParamsを使用しているのはリクエストヘッダが下記のようになっていたためです。 content-type: application/x-www-form-urlencoded 参照サイト https://qiita.com/amamamaou/items/b6cb39739bba4abf4544 ですので、パラメータを付与するのではなくPOST送信を行います。

Anon_

2020/10/01 07:12

本文に追記を行いました。ご確認いただけますと幸いです。ちなみに最初に貼っていただいたコードですと、追記したコードと同じようにキーが (unable to decode value)とはならず普通にカラーと表示されます。

yambejp

2020/10/01 07:34

認識の齟齬があるようですれ違っていて申し訳ありませんが私の回答はあくまでfetchなのでaxiosではどうかわかりませんが post時はformdataを使うのがベターです

Anon_

2020/10/01 07:40

なるほどありがとうございます。

Anon_

2020/10/01 08:23

選択肢がないケースで試したら普通にフォーム送信が通ったのではじかれる原因はリファラではなかったです。また、FormData();でも全然問題なかったのでそちらに直しておきました。やはり、文字コードの認識が実際のものとは違うようです。