Не удается подключиться к концентратору сигналов из ионного приложения: доступ к XMLHttpRequest ... заблокирован политикой CORS - PullRequest
Новая
       16

Не удается подключиться к концентратору сигналов из ионного приложения: доступ к XMLHttpRequest ... заблокирован политикой CORS

0 голосов
/ 14 марта 2019

Я пытаюсь разработать простое доказательство концепции для ионного приложения, отправляющего и получающего сообщения сигнализатора.У меня есть очень простое веб-приложение-сигнализатор, встроенное в .net 4.5, которое успешно отправляет и получает сообщения от подключенных клиентов на хосте приложения.

Я сейчас пытаюсь подключиться к этому из ионного приложения, но получаюсообщение

Доступ к XMLHttpRequest в 'http://localhost:59621/signalr/negotiate' из источника' http://localhost:8100' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа:значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», если режим учетных данных запроса «include».

при попытке установить соединение сконцентратор сигналов.

Любая помощь приветствуется.

.Net Code

Startup.cs 

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

ChatHub.cs 

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

Ионный код 

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

@Component({
    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 => {
                        this.name = data.Name;
                    }
                }
            ]
        });

        alert.present();

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

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

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

Ионная информация

Ионный:

Ионный (Ionic CLI): 4.0.6

Ionic Framework: ионно-угловой 3.9.3

@ ionic / app-scripts: 3.2.1

Cordova:

Cordova (Cordova CLI): 8.1,0 Cordova Платформы: нет

Система:

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

Среда:

ANDROID_HOME: не установлено

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Ваш код в порядке. вопрос о CORS связан. Таким образом, вы должны выполнить следующие шаги

  1. Создание ярлыка Chrome на рабочем столе и переименование no-cors (независимо от имени)
  2. Щелкните правой кнопкой мыши значок и перейдите к свойству
  3. Затем измените цель на "C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --disable-web-security --user-data-dir = "D: / Chrome" и сохраните .

Тогда запустите этот браузер, это точно работает спасибо

0 голосов
/ 01 апреля 2019

Проблема заключалась в том, что плагину сигнализатора для ionic требовался внутренний сервер .Net Core. Я пытался использовать .Net Framework.

...