Custom headers on form requests

[kentcdodds]

I'd like to be able to specify custom headers on form requests because my infrastructure (Fly.io) can behave differently based on some headers and I'd like to take advantage of that.

Having something global would be cool, but I'm fine setting it on a per-form basis.

Also, I realize that there's no way to do this with regular HTML, so this would just be an enhancement not something that would work without JS.

Here's my idea:

<Form method="post" headers={{ 'fly-prefer-region': ENV.PRIMARY_REGION }}>
  {/* ... */}
</Form>

Same for fetcher.Form

And for useSubmit and fetcher.load/submit:

submit(form, { method: 'post', headers: { 'fly-prefer-region': ENV.PRIMARY_REGION } })

[sergiodxa]

Is there no way to attach that headers somewhere else server-side but before it reaches Fly? Maybe on the CDN 🤔

[kentcdodds]

I'm not using a CDN.

[sergiodxa]

My only concern with this is if you need the header for your logic to work, example

<Form method="post" headers={{ 'authorization': someToken }}>

this will cause the form to don't work until JS loads and it's probably a bad idea, for your particular example I imagine setting fly-prefer-region is ideal but it can still work without it

[edmundhung]

I also think having it available on the <Form /> might confuse people if this is supported by the browser natively. But I like the programmatic API.

function ExampleForm() {
  const submit = useSubmit();

  return (
    <Form
      method="post"
      onSubmit={e => {
        e.preventDefault();

        // The form work before JS and will be enhanced with extra header after hydation
        submit(e.currentTarget, { headers: { 'fly-prefer-region': ENV.PRIMARY_REGION } })
      }}
    >
      { /* ... */}
    </Form>
  );
}

[sergiodxa]

I like this idea, keep the <Form> component in sync with <form> and allow more JS-only features on useSubmit and probably fetcher.submit, since those work only with JS anyway there's no risk.

[kentcdodds]

Agreed 👍 This would work for me.

[kiliman]

Can't we just support in on <fetcher.Form>? Then you don't have to override the onSubmit.

<fetcher.Form method="post" headers={{ 'fly-prefer-region': ENV.PRIMARY_REGION }}>
  {/* ... */}
</fetcher.Form>

[sergiodxa]

fetcher.Form also works without JS because it renders a <form>

[th-m]

I am building an app that is designed to be embedded on 3rd party sites in an iframe.

Supporting safari is a requirement for this app, and because of safari's bug (feature?) we are unable to use cookies from within an iframe on 3rd party sites without sandboxing and user prompts. https://stackoverflow.com/a/72506013

The way safari suggests doing it is non-standard and relies upon the storage access api. https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API

If someone knows of a good way to use cookies reliably for embedded sites across browsers I am eager to hear how it is done.

Currently, I am monkey-patching the window.fetch in order to inject the headers I need prior to navigation and form events.

I appreciate the ideal of remix working without JS. But supporting something like a FetchIntercepterContext or headers in Link and Form components would allow developers who have apps that rely on javascript to also benefit from the server utilities provided by Remix.

[th-m]

Also headers as a replacement for cookies is going to become even more beneficial.

https://security.stackexchange.com/questions/229884/how-to-send-cookie-to-api-on-seperate-domain-in-safari

safari is already killing 3rd party cookies, and soon chrome and firefox will too.