Uncaught TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString

[decioferreira]

SSCCE

module Main exposing (main)

import Browser
import Html exposing (text)
import Http


main : Program () () ()
main =
    Browser.element
        { init =
            \_ ->
                ( ()
                , Http.request
                    { method = "GET"
                    , headers = [ Http.header "foo" "âçéÿ€èëïîôœæâà" ]
                    , url = "https://www.example.com"
                    , body = Http.emptyBody
                    , expect = Http.expectWhatever (always ())
                    , timeout = Nothing
                    , tracker = Nothing
                    }
                )
        , view = \_ -> text ""
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

Link to ellie: https://ellie-app.com/8KGdFZz6j7qa1

Problem

When adding a HTTP header value with non UTF-8 characters we see the following error:

Uncaught TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': Value is not a valid ByteString

HTTP headers can only contain UTF-8 Strings (see ByteString).

This might relate to #53.

Workaround

Use Url.percentEncode to encode the value.

module Main exposing (main)

import Browser
import Html exposing (text)
import Http
import Url


main : Program () () ()
main =
    Browser.element
        { init =
            \_ ->
                ( ()
                , Http.request
                    { method = "GET"
                    , headers = [ Http.header "foo" (Url.percentEncode "âçéÿ€èëïîôœæâà") ]
                    , url = "https://www.example.com"
                    , body = Http.emptyBody
                    , expect = Http.expectWhatever (always ())
                    , timeout = Nothing
                    , tracker = Nothing
                    }
                )
        , view = \_ -> text ""
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

Link to ellie: https://ellie-app.com/8KJ2mmzRZgPa1