Unable to set Content-Type in API requests if a body is present

[jamiemm]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Version

v6

Amplify Categories

api

Backend

Other

Environment information

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 51.08 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.2.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 8.6.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.141
    Safari: 17.5
  npmPackages:
    @babel/plugin-proposal-private-property-in-object: ^7.21.0 => 7.21.11 (7.21.0-placeholder-for-preset-env.2)
    @babel/runtime: ^7.21.0 => 7.23.9 
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/icons-material: ^5.11.11 => 5.11.11 
    @mui/lab: ^5.0.0-alpha.123 => 5.0.0-alpha.123 
    @mui/material: ^5.11.13 => 5.11.13 
    @mui/x-date-pickers: ^6.18.2 => 6.18.2 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @reduxjs/toolkit: ^1.9.3 => 1.9.3 
    @reduxjs/toolkit-query:  1.0.0 
    @reduxjs/toolkit-query-react:  1.0.0 
    aws-amplify: ^6.5.0 => 6.10.3 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    babel-plugin-import: ^1.13.6 => 1.13.6 
    clsx: ^1.2.1 => 1.2.1 (2.0.0, 2.1.0)
    customize-cra: ^1.0.0 => 1.0.0 
    dayjs: ^1.11.10 => 1.11.10 
    immer: ^10.0.3 => 10.0.3 (9.0.6, 9.0.21)
    lodash: ^4.17.21 => 4.17.21 
    prop-types: ^15.8.1 => 15.8.1 
    react: ^18.2.0 => 18.2.0 
    react-app-rewired: ^2.2.1 => 2.2.1 
    react-dom: ^18.2.0 => 18.2.0 
    react-material-ui-form-validator: ^3.0.1 => 3.0.1 
    react-perfect-scrollbar: ^1.5.8 => 1.5.8 
    react-redux: ^8.0.5 => 8.0.5 
    react-router-dom: ^6.9.0 => 6.9.0 
    react-scripts: ^5.0.1 => 5.0.1 
  npmGlobalPackages:
    corepack: 0.28.1
    depcheck: 1.4.7
    npm: 10.7.0
    openapi-to-md: 1.0.24
    redoc-cli: 0.13.21
    swagger-markdown: 2.3.2
    yarn: 1.22.22

Describe the bug

If there is a body present in any rest api request, the Content-Type header is set to 'application/json; charset=UTF-8' regardless of what is specified in the options.headers object when constructing the request.

This issue was not present in Amplify v5 as I only noticed this after upgrading.

I can see the code doing this in the amplify codebase in api-rest/src/utils/resolveHeaders.ts.

Expected behavior

If specifying a Content-Type header while creating a request, I would expect that header to be unchanged when making the request.

Reproduction steps

1. When creating a rest api request, specify a Content type header like 'text/plain' and a string as the body in the options object
2. When you execute the request you will see the Content-Type header set to 'application/json; charset=UTF-8' in the browser

Code Snippet

// example code
const postOperation = post({
    apiName: 'MyAPI',
    path: '/path',
    options: {
        headers: {'Content-Type': 'text/plain'},
        body: 'test string',
    }
})

// Amplify-js api-rest/src/utils/resolveHeaders.ts snippet

const normalizedHeaders: Record<string, string> = {};
for (const key in headers) {
  normalizedHeaders[key.toLowerCase()] = headers[key];
}
if (body) {
  normalizedHeaders['content-type'] = 'application/json; charset=UTF-8';
  ...
}

return normalizedHeaders;

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hey, @jamiemm 👋 and thanks for opening this issue. Can you help us understand the context here on what you're looking to do by setting the plain text header? Right now, the header is indeed being hard coded so we'll consider this a version parity feature request for the time being.

[jamiemm]

Hey @cwomack, thanks for the reply. We are using amplify to integrate with AWS resources deployed outside of Amplify - primarily for handling the authentication side of things with cognito etc.

I noticed this issue during a PATCH request, we were using Content-Type=application/json-patch+json for this in V5 amplify but in V6 it isn't possible to set this anymore. The workaround we've gone with is to change the backend server to expect the application/json; charset=UTF-8 header instead.

I used text/plain while raising this ticket to illustrate the change in the way headers are treated as simply as possible.