从Ionic 3调用WCF Post方法失败，请求技术解决方案

这个HttpErrorResponse status 0的错误通常说明你的请求根本没成功到达WCF服务端，大概率是跨域、配置或者请求格式的问题。结合你的场景，我整理了几个最可能的解决方向：

1. 先排查CORS跨域问题（最常见） #

因为Ionic是前端应用，和WCF服务不在同一个域名/端口下的话，浏览器会自动拦截跨域请求，这是最容易触发status 0错误的原因。

解决办法：

• 给WCF的web.config添加跨域响应头，允许前端的请求：

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" /> <!-- 测试阶段用*，生产环境指定具体域名 -->
        <add name="Access-Control-Allow-Methods" value="POST, OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

• 注意：如果是在真机上测试，不要用localhost访问WCF，改用服务器的本地IP地址（比如http://192.168.1.100/YourService.svc），确保真机和服务器在同一个局域网。

2. 检查WCF服务的终结点与方法配置 #

WCF默认的配置可能不支持JSON格式的POST请求，需要明确配置：

• 确保你的服务契约接口中，GetMonthWiseAttendance方法标记了正确的WebInvoke属性：

  [ServiceContract]
  public interface IYourService
  {
    [WebInvoke(
      Method = "POST",
      RequestFormat = WebMessageFormat.Json,
      ResponseFormat = WebMessageFormat.Json,
      BodyStyle = WebMessageBodyStyle.WrappedRequest
    )]
    Stream GetMonthWiseAttendance(InputMonthwise input);
  }
  

• 同时在web.config里配置webHttpBinding和对应的行为：

  <system.serviceModel>
    <services>
      <service name="YourNamespace.YourService">
        <endpoint 
          address="" 
          binding="webHttpBinding" 
          contract="YourNamespace.IYourService"
          behaviorConfiguration="webHttpBehavior"
        />
      </service>
    </services>
    <behaviors>
      <endpointBehaviors>
        <behavior name="webHttpBehavior">
          <webHttp helpEnabled="true" />
        </behavior>
      </endpointBehaviors>
    </behaviors>
  </system.serviceModel>
  

3. 确保Ionic的请求格式与WCF匹配 #

检查你Ionic里的POST请求是否正确设置了请求头和请求体：

• 必须指定Content-Type: application/json，并且请求体是正确序列化的JSON对象：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // ...
  
  const inputPayload = {
    // 这里的属性名要和WCF的InputMonthwise类属性对应（注意大小写，必要时统一命名）
    studentId: 123,
    month: "2024-05",
    // 其他必填字段
  };
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  
  this.http.post('http://your-wcf-service-url/YourService.svc/GetMonthWiseAttendance', inputPayload, httpOptions)
    .subscribe(
      res => console.log('Success:', res),
      err => console.error('Error:', err)
    );
  

4. 验证WCF的参数类序列化 #

确保你的InputMonthwise类是可被JSON序列化的，并且属性名和前端发送的JSON键一致：

• 给类添加DataContract和DataMember属性，必要时指定JSON键名：

  [DataContract]
  public class InputMonthwise
  {
    [DataMember(Name = "studentId")] // 对应前端的studentId字段
    public int StudentId { get; set; }
  
    [DataMember(Name = "month")]
    public string Month { get; set; }
  
    // 其他属性
  }
  

5. 排查网络与地址问题 #

• 如果是浏览器测试：打开开发者工具的Network标签，查看OPTIONS请求的状态（CORS验证会先发OPTIONS请求），如果返回404或500，说明WCF没正确处理OPTIONS请求。
• 如果是真机测试：确保WCF服务器的防火墙允许对应端口的入站请求，并且服务器和真机在同一个网络。

内容的提问来源于stack exchange，提问作者DILIP PAKHARE