axiosのヘッダーのconfigでちょっとハマった

某APIを試しててaxiosのconfig指定をミスってたので、自戒の意味を込めて残しておきます。

完全に自分用メモっぽいやつです。

ミスったコードなど

//省略

class Hoge {
    constructor() {
        //省略
    }

    //ミスった方
    methodA(IMAGE_PATH){
        const file = fs.createReadStream(IMAGE_PATH);
        const form = new FormData();
        form.append('image', file);
        form.append('entrance', 'detection');

        const config = {
            'X-ClovaOCR-Service-ID': this.SERVICE_ID,
            ...form.getHeaders()
        };

        return axios.post(this.URL.RECOGNITION, form, config)
   }


   //うまくいった方
   methodB(IMAGE_PATH){
        const file = fs.createReadStream(IMAGE_PATH);
        const form = new FormData();
        form.append('image', file);
        form.append('entrance', 'detection');

        const config = {
            headers: {
                'X-ClovaOCR-Service-ID': this.SERVICE_ID,
                ...form.getHeaders(),
            }
        }

        return axios.post(this.URL.RECOGNITION, form, config)
   }
}

const hoge = new Hoge();
hoge.methodA(); // エラー
hoge.methodB(); // 成功

axiosのconfigミス

慣れてつかってるうちにconfig=headersっぽいイメージで使ってたみたい。
通常configの中には他にもmethod指定やbodyデータなども入ってくるのでconfig.headersな指定にしないとですね。

const config = {
    'X-ClovaOCR-Service-ID': this.SERVICE_ID,
    ...form.getHeaders()
};

const config = {
    headers: {
        'X-ClovaOCR-Service-ID': this.SERVICE_ID,
        ...form.getHeaders(),
    }
}