SSE client is not adding headers from requestInit? in _commonHeaders method

[jigarchhadwa]

When we create SSE client that needs additional headers to be passed to the server, the current code does not work. It does not pass the additional headers configured in the requestInit via SSEClientTransportOptions.

Exact issue is in the method below in SSE client:
https://github.com/modelcontextprotocol/typescript-sdk/blob/main/src/client/sse.ts#L108

return headers;

The return should be changed to something like below: [Similar to how it is done in https://github.com/modelcontextprotocol/typescript-sdk/blob/main/src/client/streamableHttp.ts#L175]

return new Headers(
      { ...headers, ...this._requestInit?.headers }
    );

[evalstate]

I just came here to raise same. There is a workaround by doing:

// For the initial SSE connection
eventSourceInit: {
  fetch: (url, init) => {
      const headers = new Headers(init?.headers || {});
      headers.set("Authorization", `Bearer xxxxxxxxxxxx}`);
      return fetch(url, {
          ...init,
          headers
      });
  }

[xarical]

I just came here to raise same. There is a workaround by doing:

// For the initial SSE connection
eventSourceInit: {
  fetch: (url, init) => {
      const headers = new Headers(init?.headers || {});
      headers.set("Authorization", `Bearer xxxxxxxxxxxx}`);
      return fetch(url, {
          ...init,
          headers
      });
  }

For the clueless, non JS/TS-user like me (so that you don't have to spend an hour and a half like I did figuring out where to put the workaround):
Instead of

import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js'
...
const transport = new SSEClientTransport(new URL("http://example.com/my/great/url"), {
  requestInit: { headers: { "Authorization": `Bearer xxxxxxxxxxxx` } }
});

Use this

import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js'
import { EventSource } from 'eventsource'
globalThis.EventSource = EventSource
...
const transport = new SSEClientTransport(new URL("http://example.com/my/great/url"), {
  requestInit: { headers: { "Authorization": `Bearer xxxxxxxxxxxx` } },
  eventSourceInit: {
    fetch: (url, init) => {
      const headers = new Headers(init?.headers || {});
      headers.set("Authorization", `Bearer xxxxxxxxxxxx`);
      return fetch(url, {
          ...init,
          headers
      });
    }
  }
});

Source: Comment on #118

[MarianaGiraldoL]

Same problem here. The headers are not being sent

[xarical]

@MarianaGiraldoL Have you tried @/evalstate's solution/workaround? It worked in my case (sending Authorization Bearer headers to my MCP server); what's your case look like?

[saadbinnadeem]

tell how can we set bearer in header .. we got session like that const session = await auth(); but we are not directly can't call in side const but we call outside then copilotkit set your header is out side please solve the proplemconst remoteTransport = new SSEClientTransport( new URL("http://0.0.0.0:8000/sse"), { requestInit: { headers: { authorization: "Bearer <secret>", }, eventSourceInit: { fetch(input: URL | RequestInfo, init: RequestInit | undefined) { const headers = new Headers(init?.headers || {}); headers.set("authorization", "Bearer "); return fetch(input, { ...init, headers, }); }, }, }, } );