Laravel HTTP facade does not return content-length in response headers

Question

I have a controller which calls multiple GET requests from Gmail API,

Basically, I am trying to get most recent 50 SENT MESSAGES.

What I did was pool these requests, and loop the Pool response and insert the retrieved data to my db.

$resp = Http::pool(function (Pool $pool) use ($messages_ids, $user, $label) {
            $messages_ids->map(function ($value, $key) use ($user, $pool, $label) {
                $pool->as('sent-'.$key)->withToken($user->token)->get($this->BASE_URL . $user->email . '/messages/' . $value['id'] . $this->QUERY_CONFIG);
                return $pool;
            });
        });

collect($resp)->map(function ($req) use($label, $next_page_token, $user_model) {
            Email::firstOrCreate(...)
});

return response()->json(['msg' => 'retrieved and saved']);

Now, In my vue component, I wanted to show a progress bar. so I used

        const config = {
            onUploadProgress: progressEvent => {
                console.log(progressEvent);
                    // console.log(`progress: ${Math.floor((progressEvent.loaded * 100))}`)
                }
        }

        const param = new FormData();
        param.append('user', this.auth_user);
        param.append('user_model', this.user_model);
        param.append('date_filter', this.afterDateFilter);
        param.append('label', 'sent');

        let req = axios.post(url, param, config, headers);
        req.then(res => {
            return res;
        }).catch(err => {
            return Promise.reject(err)
        })

Now, the progress jumps to 100%. I noticed that I should not have used onUploadProgress since it will get the content-length of the request's body parameters.

So, I used onDownloadProgress... however, the onDownloadProgress does not return the progressEvent.total maybe because content-length does not exist in the request's response header.

Here's the response header:

cache-control: no-cache, private
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 07 Mar 2022 06:07:54 GMT
server: nginx/1.10.3 (Ubuntu)
set-cookie: XSRF-TOKEN=eyJp...; expires=Mon, 07-Mar-2022 08:07:54 GMT; Max-Age=7200; path=/; samesite=lax
set-cookie: laravel_session=eyJp...; expires=Mon, 07-Mar-2022 08:07:54 GMT; Max-Age=7200; path=/; httponly; samesite=lax
vary: Accept-Encoding
via: 1.1 somehash.cloudfront.net (CloudFront)
x-amz-cf-id: somehash-Q==
x-amz-cf-pop: MNL50-C1
x-cache: Miss from cloudfront

Can anyone point out how I do progress bar when using HTTP facade and axios?

Answer 1

The problem is in gzipped responses. You should include a Content-Length header in the response. Additionally, Node doesn't allow 'Transfer-Encoding' and Content-Length headers to be present in a response both at the same time.

This issue is addressed here: https://github.com/axios/axios/issues/1591#issuecomment-431400903

and here: https://github.com/axios/axios/issues/2709