How to pass Custom Header from React JS client to SignalR hub? - signalr

Question

I am setting up a new SignalR react app ("#aspnet/signalr") with Dot Net Core 2.0. I want to send custom headers to SignalR hub "negotiate" request (like request.headers["MyHeader"] = "Header").
I am able to connect to hub and get data back to react app. I have tried setting custom header by trying to overwrite httpClient in options passed to "withUrl".
With the code provided here I am getting error: "Error: Failed to complete negotiation with the server: Error: Unexpected status code returned from negotiate undefined"
It connects when httpClient is removed from options.
import { HubConnectionBuilder } from '#aspnet/signalr';
const options = {
accessTokenFactory: () => {
return "jwt token";
},
httpClient: {
post: (url, httpOptions) => {
httpOptions.headers = {
...httpOptions.headers,
MyHeader: "NewHeader"
};
httpOptions.method = "POST";
httpOptions.url = url;
return httpOptions;
}
}
};
const connection = new HubConnectionBuilder()
.withUrl("https://localhost:5001/chatHub", options)
.build();
connection.start().catch(function(err) {
console.log("Error on Start : ", err);
});
The way I see header as "Authorize": "jwt token", I expect to see another header in "https://localhost:5001/chatHub/negotiate" request as "MyHeader": "NewHeader"

Answer 1

Found answer to this.
httpClient.post overwrites the response of default SignalR httpClient.post.
Below update to httpClient worked.
httpClient: {
post: (url, httpOptions) => {
const headers = {
...httpOptions.headers,
MyHeader: "MyHeader"
};
return axios.post(url, {}, { headers }).then(response => {
return (newResponse = {
statusCode: response.status,
statusText: response.statusText,
content: JSON.stringify(response.data)
});
});
}
}
SignalR "negotiate" expects response in this form.
{
statusCode: 200,
statusText: "ok",
content: "<string response>"
}