フロントエンドからバックエンドに値を送る時に、文字列の最後の半角スペースが省略されてしまう

Question

前提・実現したいこと

フロントエンドからバックエンドに値を送る時に、その値の文字列が省略されず正常な値を送りたい。

発生している問題・エラーメッセージ

フロントエンドで値を確認時は文字列内の半角スペースが省略されず正常な値が確認できました。
しかし、バックエンドで確認時は文字列内の半角スペースが省略されてしまっていました。

該当のソースコード

・CellDataCalcCreate.js

calcService.calcFileUpdate(company_cd,
                    company_name,
                    project_cd,
                    calc_file_no,
                    user_id,
                    user_name,
                    calculation_file_name,
                    annotation_ver,
                    remarks,
                    confirmed_flag,
                    update_date,
                    detailData,
                    file_size,
                ).then((response) => {
                   //以下省略
                });

・calculation.service.js

const calcFileUpdate = async (
  company_cd,
  company_name,
  project_cd,
  calc_file_no,
  user_id,
  user_name,
  calc_file_name,
  annotation_version,
  remarks,
  confirmed_flag,
  update_date,
  calc_parameter,
  file_size,
) => {
  // calc_parameter = JSON.stringify(calc_parameter);
  // const formData = new FormData();
  // const params = new URLSearchParams()
  // formData.append('company_cd', company_cd);
  // formData.append('company_name', company_name);
  // formData.append('project_cd', project_cd);
  // formData.append('calc_file_no', calc_file_no);
  // formData.append('user_id', user_id);
  // formData.append('user_name', user_name);
  // formData.append('calc_file_name', calc_file_name);
  // formData.append('annotation_version', annotation_version);
  // formData.append('remarks', remarks);
  // formData.append('confirmed_flag', confirmed_flag);
  // formData.append('update_date', update_date);
  // formData.append('calc_parameter', calc_parameter);
  // formData.append('file_size', file_size);

  return await axios.post(API_URL + 'fileupdate', {
    // formData,
    // params,
    company_cd,
    company_name,
    project_cd,
    calc_file_no,
    user_id,
    user_name,
    calc_file_name,
    annotation_version,
    remarks,
    confirmed_flag,
    update_date,
    calc_parameter,
    file_size,
  })
    .then((response) => {
      if (response.data.success) {
        console.log(response);
      }
      return response;
    });
};

・CellCalcController.php

/**
     * 細胞計算ファイルパラメータ更新API
     * @param Request $request
     * @param CellCalcExclusiveCheckService $exclusiveCheckService
     * @param DuplicateCalcCheckService $duplicateCalcCheckService
     * @param CellCalcQueryService $cellCalcQueryService
     * @param CellCalcFileService $cellCalcFileService
     * @return \Illuminate\Http\JsonResponse
     */
    public function fileUpdate(Request $request, CellCalcExclusiveCheckService $exclusiveCheckService,
                               DuplicateCalcCheckService $duplicateCalcCheckService,
                               CellCalcQueryService $cellCalcQueryService,
                               CellCalcFileService $cellCalcFileService,
                               CompanyStorageCapacityCheckService $companyStorageCapacityCheckService)
    {
        $company = CompanyM::createFill($request->all());
        $user = UserM::createFill($request->all());
        $cell_calc = CellGroupCalcHeader::createFill($request->all());
        $csv_data = $cellCalcFileService->convertJSONToCSV($request->get('calc_parameter'));
        Log::debug($request);

        //以下省略
    }

・フロントエンドの一部ログ(エラーの箇所はインデックスの0番目の値です)

・バックエンドの一部ログ(こちらもarrayの0番目の値です)

一応ログを見る通り、全角スペースの場合は省略されていません。

試したこと

ソースコードのコメントでも残してあるように、FormData()、URLSearchParams() といった情報もあったので試してみましたが
バックエンドで想定している値の形では無かったりと上手く確認することができませんでした。

axios.post周りが怪しいのかなとは思いつつも、自分だけでは解決することが出来ない状態でして、
どなたか未熟な自分にご教示をお願いしたいです。

Comments

[takasima20]

よくわかりませんが、送信時の method は POST なんスかね?
GET だと encode / decode がいりそうな?

[j.f15]

はい。今回のケースではメソッドは POST の処理を行っています。

Answer 1

fetchでテストしてみて下さい

//sample.html

const calcFileUpdate = async (a,b,c)=>{
  const body=new FormData();
  body.append("aaa",a);
  body.append("bbb",b);
  body.append("ccc",c);
  return await fetch("sample.php",{method:"post",body}).then(res=>res.text());
};
(async()=>{
  const res=await calcFileUpdate(1,2,3);
  console.log(res);
})();

※調整版
//sample.php

<?PHP
var_dump($_POST);

Comments

[j.f15]

回答ありがとうございます。
今すぐには確認できないのですが確認でき次第、返信させていただきたいと思います。

[j.f15]

頂いた情報を元にこのようなコードを試してみたのですが何か間違いとかありますでしょうか？
この状態で実行するとバックエンド側に値が送られていないのか、バックエンド側のログが表示されていません。fetchの記述等は間違ってはいないとは思っているのですが何か分かれば教えて頂きたいです。

```javascript
const calcFileUpdate = async (
company_cd,
company_name,
project_cd,
calc_file_no,
user_id,
user_name,
calc_file_name,
annotation_version,
remarks,
confirmed_flag,
update_date,
calc_parameter,
file_size,
) => {
const formData = new FormData();
formData.append('company_cd', company_cd);
formData.append('company_name', company_name);
formData.append('project_cd', project_cd);
formData.append('calc_file_no', calc_file_no);
formData.append('user_id', user_id);
formData.append('user_name', user_name);
formData.append('calc_file_name', calc_file_name);
formData.append('annotation_version', annotation_version);
formData.append('remarks', remarks);
formData.append('confirmed_flag', confirmed_flag);
formData.append('update_date', update_date);
formData.append('calc_parameter', calc_parameter);
formData.append('file_size', file_size);
console.log("111111111");

return await fetch(API_URL + 'fileupdate',{method:"post",body:formData})
.then((response) => {
console.log(response);
if (response.ok) {

}
return response;
});
};
```

※他のコード部分はいじっておりません。

[yambejp]

fetchの戻り値は一旦text()やjson()で適正な型に変更して下さい
（回答に記述してあるとおりです）
またテストするならもっと引数を絞ってデバッグして下さい

[j.f15]

```javascript
const formData = new FormData();
formData.append('calc_parameter', calc_parameter);
formData.append('file_size', file_size);
console.log("111111111");

return await fetch(API_URL + 'filecreate', { method: "post", body: formData })
.then((response) => {
console.log(response);
response.json();
})
.then((json) => {
console.log(json);
});
```

テストの値を絞って、fetchの戻り値をjson指定にした記述をしてみたのですが何か記述等で間違いはないでしょうか？
この記述でも変わらずバックエンド側には処理が到達していませんでした。

[yambejp]

response.json()をreturnしてやる必要があります

[yambejp]

回答のsample.htmlを修正してあります。
再度仕様をよく確認して下さい

[j.f15]

本当に申し訳ございません。

色々と調査していたのですが、バックで要求しているURLとは別のURL名になってしまっていたのが原因でバックまで値が送られていませんでした。(おそらくfetchを使う形に色々と処理を書いている内に間違えてしまっていたようです...)
最終的にaxios.postのような形で記述していた箇所をfetchを利用する形でバックエンドにPOSTした値を確認した所、無事に半角スペースは省略されていませんでした。

yambejpさん
お時間を取ってしまい申し訳ございませんでした。それと解決方法の提示、本当にありがとうございました。