aws4 signed request works on Firefox but it got 403 error on Chrome

[syang]

I am doing the follow axios call to AWS API-Gateway. Here is the code snippets.

My app runs well (being able to post to API-Gateway) in Firefox, but it returns 403 error in Chrome.

    let request = {
      host: `${API_HOST}`,
      data: mydata,
      body: JSON.stringify(mydata),
      method: 'POST',
      url: `https://${API_HOST}/dev/pets`,
      path: `/dev/pets`,
    };

    const mysession = await Auth.currentSession();

    const mycredential = await Auth.currentCredentials();
    console.log(mycredential)

    const signedRequest = aws4.sign(request, {
      accessKeyId: mycredential.accessKeyId,
      secretAccessKey: mycredential.secretAccessKey,
      sessionToken: mycredential.sessionToken,
    });
    console.log(signedRequest)
    delete signedRequest.headers['Host']
    delete signedRequest.headers['Content-Length']
    const response = await axios(signedRequest);

Here is the error message on debugging console:

Failed to load resource: the server responded with a status of 403 ()

@mhart , could you shed some light on the above behavior?

[mhart]

No I can't, I'm sorry. There's not enough information there – it doesn't look like it's an issue with signing though, especially since it works in Firefox.

[syang]

@mhart No problem.

I figured out how to fix it, see the code below -- I simply added this headers: { 'content-type': 'application/json' } into my request.

What puzzled me is why the behavior is inconsistent across different browser. Could anyone help me understand the root cause of the inconsistency?

    let request = {
      host: `${API_HOST}`,
      data: mydata,
      body: JSON.stringify(mydata),
      method: 'POST',
      url: `https://${API_HOST}/dev/pets`,
      path: `/dev/pets`,
      headers: {
        'content-type': 'application/json'
      }
    };

[mhart]

I can't I'm afraid – I don't think it's got anything to do with this library.