Cannot connect to signalr hub from ionic app: Access to XMLHttpRequest … has been blocked by CORS policy


I’m trying to develop a simple proof of concept for an ionic app sending and receiving signalr messages. I have a very simple signalr web app built in .net 4.5 that is succesfully sending and receiving messages from connected clients within the app host.

I am now trying to connect to this from an ionic app but I get the message

Access to XMLHttpRequest at ‘http://localhost:59621/signalr/negotiate
from origin ‘http://localhost:8100‘ 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

when attempting to establish a connection to the signalr hub.

Any assistance is much appreciated.

.Net Code


public class Startup
    public void Configuration(IAppBuilder app)
        // Any connection or hub wire up and configuration should go here
        app.Map("/signalr", map =>
            var hubConfiguration = new HubConfiguration
                EnableDetailedErrors = true,


public class ChatHub : Hub
    public void Send(string name, string message)
        // Call the addNewMessageToPage method to update clients.
        Clients.All.addNewMessageToPage(name, message);

Ionic Code

import { Component } from '@angular/core';
import { NavController, DateTime, AlertController } from 'ionic-angular';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';

    selector: 'page-home',
    templateUrl: 'home.html'
export class HomePage {

    hubConnection: HubConnection;
    name: string;
    message: string;
    messages: string[] = [];

    constructor(public navCtrl: NavController, public alertCtrl: AlertController) {


    ionViewDidLoad() {


    ionViewWillEnter() {
        let alert = this.alertCtrl.create({
            title: 'Demo',
            message: 'What is your name?',
            inputs: [
                    name: 'Name',
                    placeholder: 'Name'
            buttons: [
                    text: 'Enter',
                    handler: data => {
               = data.Name;


        this.hubConnection = new HubConnectionBuilder().withUrl('http://localhost:59621/signalr').build();
            .then(() => console.log('Connection started!'))
            .catch(err => {
                console.log('Error while establishing connection :(')

        this.hubConnection.on('addNewMessageToPage', (name: string, receivedMessage: string) => {
            const text = `${name}: ${receivedMessage}`;

    sendMessage() {
            .invoke('send',, this.message)
            .then(() => this.message = '')
            .catch(err => console.error(err));

Ionic Info


ionic (Ionic CLI) : 4.0.6

Ionic Framework : ionic-angular 3.9.3

@ionic/app-scripts : 3.2.1


cordova (Cordova CLI) : 8.1.0
Cordova Platforms : none


NodeJS : v8.11.0 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10


ANDROID_HOME : not set


The problem was that the signalr plugin for ionic required a .Net Core backend. I had been attempting to use a .Net Framework backend.

Answered By – Mark Seymour

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published