Expose agent property of node-fetch

[TekSiDoT]

We're using a dev-machine local proxy to upgrade local dev-server non-HTTPS calls to HTTPS calls based on self-signed certificates.

When using fetch() from within Remix, a FetchError / _self signed certificate_ error is thrown.

The standard way to resolve this error in node-fetch would be to supply a custom http.agent with the rejectUnauthorized option set to false. Unfortunately, the agent option is not part of the TS lib.dom RequestInit options definition exposed in Remix.

This is probably expected behavior, because afaics Remix just exposes the Web Fetch API, which of course has no concerns as changing its agent... any ideas?

[TekSiDoT]

After doing some more digging:

• Remix doesn't actually wrap node-fetch, instead, it uses a for of web-std-io as a source for its @remix-run/web-fetch package
• Setting the node env variable NODE_TLS_REJECT_UNAUTHORIZED circumvents the problem - at least for us it's good enough for local dev

[cliffordfajardo]

I recently found out that Remix does expose the agent property for fetch and Response APIs.
To get this to work, you need to import fetch or Response from the @remix-run/node package as opposed to using the global versions of fetch and Response which default to the browser versions, which dont expose the extra options.

TLS Workaround -- Per HTTP/S Call

import { fetch, Request, json, LoaderArgs } from '@remix-run/node'; 
import https from 'https'; // OR import 'http' if your remix server is running on http

export async function loader({ params }:LoaderArgs) {
    // Example 1
    const response1 = await fetch('example-api.com/people',{
        agent: new https.Agent({ rejectUnauthorized: true, requestCert: false})
    })
    const data1 = await response1.json();


    // Example 2
    const response2 = new Request('example-api.com/people', {
        agent: new https.Agent({ rejectUnauthorized: true, requestCert: false})
    })
    const data2 = await response2.json();


    return json({});
  }

TLS Workaround -- Application Wide Setting

I don't claim that this is the best solution, but its a good way to get unblocked to continue building during development.
You can pass the NODE_TLS_REJECT_UNAUTHORIZED environment variable into your node app during development like this:

// Package.json
"scripts": {
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 remix dev",
},

or

// entry.server.ts
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

References / Related

• How to bypass TLS / HTTPS / SSL requirements when talking with external APIs in Remix app during local development ? #4059
• How to proxy `fetch` or `Request` HTTP/s calls in my Remix app on the server side? #4282