Попытка подключиться к веб-серверу WCF с помощью Ionic4

Question

Я пытаюсь подключиться к веб-службе WCF с помощью Ionic4. Я могу подключиться к веб-сервису, используя обычный ajax, но не могу с HTTPClient от Ionic. Ошибка, которую я получаю, заключается в том, что веб-сервис не настроен на прием соединений с сервера.

Ниже приведен код с веб-сервера, который настроен на прием подключений от внешних серверов. Другой раздел кода - это подключение к веб-серверу из приложения Ionic.

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With,Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

constructor(private http: HttpClient) { }

query() {
  this.data = this.http.get('http://localhost:55283/LOAService.svc/test');
  this.data.subscribe(data => {
    this.result = data;
  });
}
}

Поскольку я могу подключиться из ajax, я могу только предположить, что проблема в коде Ionic. Правильно ли я это предполагаю?

Answer 1

Нет проблем с междоменной конфигурацией WCF в вашем фрагменте кода. Как вы публикуете свой сервис? если вы хотите получить доступ к сервису через библиотеку Angular httpclient, я предлагаю вам опубликовать его в спокойном стиле. https://docs.microsoft.com/en-us/dotnet/framework/wcf/wcf-and-aspnet-web-api
Как я могу использовать Службу WCF?
Я сделал демо, хотел бы, чтобы это было полезно для вас (поскольку вы уже писали о междоменной конфигурации, я использовал другую конфигурацию. Но они похожи).
Wcf-сервис (интерфейс и реализация)

    [ServiceContract]
    public interface IService1
    {

        [OperationContract]
        [WebGet(ResponseFormat =WebMessageFormat.Json,RequestFormat =WebMessageFormat.Json)]
        string GetData(int value);
}
public class Service1 : IService1
    {
        public string GetData(int value)
        {
            return string.Format("You entered: {0}", value);
        }
}

Web.config

    <system.serviceModel>
        <services>
          <service name="WcfService2.Service1">
            <endpoint address="" binding="webHttpBinding" contract="WcfService2.IService1" behaviorConfiguration="myBehavior"></endpoint>
            <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"></endpoint>
          </service>
        </services>
        <behaviors>
          <endpointBehaviors>
            <behavior name="myBehavior">
              <webHttp />
            </behavior>
          </endpointBehaviors>
          <serviceBehaviors>
            <behavior>
              <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>
              <serviceDebug includeExceptionDetailInFaults="false"/>
            </behavior>
          </serviceBehaviors>
        </behaviors>
        <protocolMapping>
            <add binding="basicHttpsBinding" scheme="https" />
        </protocolMapping>    
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
      </system.serviceModel>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*"/>
      <add name="Access-Control-Allow-Headers" value="content-type" />
      <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    </customHeaders>
  </httpProtocol>  

global.asax.

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
}

Клиент (App.component.ts)

import { Component,OnInit } from '@angular/core';
import {HttpClient,HttpHeaders} from '@angular/common/http';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my angular';
  data='';
  private url="http://10.157.18.36:12000/service1.svc/getdata?value=100"
  constructor(
    private http: HttpClient
  ){

  }
  getData():Observable<string>{
    return this.http.get<string>(this.url,{responseType:'json'});
  }
ngOnInit(){
  this.getData().subscribe(x=>this.data=x);
}
}

Клиент (App.component.html)

<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
</div>
<hr>
{{data}}

Result.

Не стесняйтесь, дайте мне знать, если есть что-то, с чем я могу помочь.