Use custom headers for both the `/sse` and `/message` endpoints

[jirispilka]

@chrisdickinson thank you for this PR

Apologies, but I'm not very strong in JS.
I need to include an API token to access my MCP server, for both the /sse and /message endpoints.

I believe the headers are not being used during client.connect()?

Here’s the code snippet I’m working with:

const customHeaders = { Authorization: `Bearer ${token}` };

const transport = new SSEClientTransport(new URL(SERVER_URL), { requestInit: { headers: customHeaders } });
const client = new Client({ name: 'example-client', version: '1.0.0' }, { capabilities: {} });

await client.connect(transport);

I'm still getting 401.
As far as I can tell, the requestInit is only being used when a message is sent. Is that correct?

I’d appreciate your help. Thank you.

[jspahrsummers]

This is a correct understanding of how it works. Unfortunately, opening the SSE connection requires the use of the EventSource class, which AFAIK doesn't support adding custom headers.

It's possible there are workarounds for Node.js, but I'm not sure there are good alternatives for the browser.

[jirispilka]

Thank you for a quick reply! I appreciate it

What would be a workaround for node.js? Can you please point me into a right direction?

[chrisdickinson]

In node, one option is to use the eventsource package.

That looks something like this:

import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js'
import { EventSource } from 'eventsource'

// define EventSource globally
globalThis.EventSource = EventSource

const remoteTransport = new SSEClientTransport(
  new URL('http://example.com/my/great/url'),
  {
    requestInit: {
      headers: { 'authorization': 'Bearer <secret>',
    },
    eventSourceInit: {
      // The EventSource package augments EventSourceInit with a "fetch" parameter.
      // You can use this to set additional headers on the outgoing request.
      fetch(input: Request | URL | string, init?: RequestInit) {
        const headers = new Headers(init?.headers || {})
        headers.set('authorization', 'Bearer <secret>')
        return fetch(input, {
          ...init,
          headers,
        })
      },
    } as any, // ... but you have to cast to "any" to use it, since it's non-standard
  }
)

// Assuming you have a "client: Client" available:
// client.connect(remoteTransport)

[jirispilka]

Thank you very much for your time! I was not able to make it work and started to use python implementation (not ideal).

Log error, full code example:

Error: SSE error: {}
Error: SSE error: {}
    at EventSource._eventSource.onerror (~/apify/actor-mcp-server/node_modules/@modelcontextprotocol/sdk/src/client/sse.ts:40:23)
    at EventSource.scheduleReconnect_fn (~/apify/actor-mcp-server/node_modules/eventsource/src/EventSource.ts:554:5)
    at <anonymous> (~/apify/actor-mcp-server/node_modules/eventsource/src/EventSource.ts:438:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

I’m just curious to see if this could work, but please don’t waste time on it now (as I did workaround with Python).
I’m sharing it here for future reference.

Thank you again for your help!

[jirispilka]

I finally revisited this issue and couldn’t believe what I found.
Earlier, I had made a copy-paste mistake when calling the SSE URL. 🤦

Apologies for the confusion—the code works! Thank you!

Here’s a full example, clientSse.ts.

[abhiaiyer91]

Hi, I know the workaround works, but are there plans to support custom headers? Our users are running into this which we will provide the workaround to them, but it all seems kind of messy.

Happy to have us @mastra contribute these kind of fixes!

[alex-redcan]

Also looking to see this supported directly.

[JordanDalton]

This is definitely needed!