Skip to content

Inconsistent behavior for headers with native Fetch API #1235

@loderunner

Description

@loderunner

According to the Fetch documentation on MDN, the headers property of the options parameter can be:

a Headers object or an object literal with String values.

However, according to an example for errors below, an array of arrays of strings can be accepted (provided the inner arrays are of length 2).

Invalid header value. The header object must contain exactly two elements.

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });

This header initializer option is supported by the Headers constructor parameter, which can be

a simple object literal with String values, an array of name-value pairs, where each pair is a 2-element string array; or an existing Headers object.


Testing in Chrome 109.0.5414.87, I found an inconsistency between what is supported by whatwg-fetch and what is supported by Chrome's native Fetch API.

  • Chrome Fetch:
    • Object
    • Array
    • Chrome Fetch Headers class
    • whatwg-fetch Headers class
  • whatwg-fetch:
    • Object
    • whatwg-fetch Headers class

I found the same results for:

  • Safari 16.0 (17614.1.25.9.10, 17614)
  • Firefox 108.0.2

My test bench for Headers support is here. cross-fetch is also tested, as it relies on whatwg-fetch in the browser, yields yet another behavior.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions