フロント エンドが axios リクエストを送信して配列パラメーターをバック エンドに送信する場合、リクエスト パスの配列パラメーターには角かっこ [] が含まれます。

問題の説明

現在、プロジェクトの一部の機能に取り組んでいるときに、バックエンド インターフェイスが配列パラメーターを受け取ります。フロントエンドがバックエンドに対して axios get 要求を開始すると、要求パスの配列パラメーターには常に角かっこ [] が含まれるため、バックエンドは常にレポートします。 400 エラー...
正しいリクエスト パス:
http://127.0.0.1:9000/bridgeMonitorContent/getContentByTypeIds?monitorTypeIds=LF-SWJTU&monitorTypeIds=ND-SWJTU
実際のリクエスト パス:
http://127.0.0.1:9000/xboot/bridgeMonitorContent/getContentByTypeIds?monitorTypeIds[]=LF-SWJTU&monitorTypeIds[]=ND-SWJTU

解決

インターネットで情報を調べたところ、シリアル化中に axios の params パラメーターの形式が正しくないことがわかりました. paramsSerializer メソッドを axios の構成アイテムで提供して、params をシリアル化することができます:

1. qs シリアライゼーション ライブラリを導入する

import qs from 'qs'

2. パッケージリクエスト方法

export const getRequest = (url, params) => {
    
    
    let accessToken = getStore('accessToken');
    return axios({
    
    
        method: 'get',
        url: `${
      
      baseApi}${
      
      url}`,
        params: params,
        paramsSerializer: params => {
    
    
            return qs.stringify(params, {
    
     indices: false })
          },
        headers: {
    
    
            'accessToken': accessToken
        }
    });
};

3. 呼び出しリクエスト メソッド

export const getContentByTypeIds = (params) => {
    
    
    return getRequest('/bridgeMonitorContent/getContentByTypeIds', params)
}

4. バックグラウンド インターフェイス

   @GetMapping("/getContentByTypeIds")
    @ApiOperation("通过多监测类型查询监测因素")
    public Result<List<BridgeMonitorContent>> getContentByTypeIds(@RequestParam List<String> monitorTypeIds){
    
    
        List<BridgeMonitorContent> contentByTypeId = iBridgeMonitorContentService.getMonitorContentByTypeId(monitorTypeIds);
        return new ResultUtil<List<BridgeMonitorContent>>().setData(contentByTypeId);
    }

最終的な効果