Asp.Net Core SignalR + Angular 6 issue

Question

I have a WebApi that was made using Asp.net Core 2.0 and consuming this API an Angular 5 App. Now I'm making a new version of this App using Angular 6 .

In this Web API I use SignalR 1.0.0-alpha-final and in the Angular 5 app I use this as client "@aspnet/signalr-client": "^1.0.0-alpha2-final" .

In the old Angular App everything works fine as intended. My problem is that I can use this package on the new version of my app:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @aspnet/signalr-client@1.0.0-alpha2-update1 install: `echo "This package has been deprecated. Use '@aspnet/signalr' instead." && exit 1`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @aspnet/signalr-client@1.0.0-alpha2-update1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Then I try to use the recommended version, I follow this article and everything runs OK on the Angular 6 App side, but it never actually connects to the Hub. this is the message I get when running my local Angular APP:

Access to XMLHttpRequest at 'http://localhost:27081/hub/notification/negotiate?jwttoken=the_token_here' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

It's not a real CORS problem, I made the WebAPI and and Angular APP run in the same domain and I never had CORS problem in my old App. I have the right Cors policies to allow localhost to use the api.

It's weird that the client added negotiate to the connection URL and even If I make my hub answer in this address I get error 400 with this message: Connection ID required

I do believe that this Client Library was made to another version than the one I have on the server, since the client and server has to follow the same version.

I tried using the node_modules from the older Angular App but I cannot get it to compile.. I don't know what to do. Has anyone experienced this issue and managed to solve? Any tips? I can't update the version on the WebAPI or I'll make the current App stop working.

Thanks for any help

Answer 1

I just got to make it work without changing the version of the webapi. This is how I make the connection:

this._hubConnection = new signalR.HubConnectionBuilder()
    .withUrl('http://localhost:27081/hub/notification/?jwttoken='+ this.jwt, 
        {
            accessTokenFactory: ()=> this.jwt ,
            skipNegotiation: true,
                transport: signalR.HttpTransportType.WebSockets
        })
    .build();

That's all. Yes, in the version I have in the API i have to send the token in the querysting. This documentation helped me achieve that.

Answer 2

You should update to the latest .Net core SignalR if you can

This include the client script @aspnet/signalR (currently 1.0.4)

With the latest Nuget Package Microsoft.AspNetCore.SignalRCore (currently 1.0.4)

Also note that initialising the hub in javascript changed from the preview version, looks something like this:

var connection = new signalR.HubConnectionBuilder().withUrl("/yourhub/").build();