使用Ajax调用WCF自助服务:405方法不允许错误

时间:2019-06-12 13:54:42

标签: ajax wcf cross-domain self-hosting http-status-code-405

在发布此问题之前,我已经浏览了很多类似的帖子,但是找不到解决方案。

我在WinForms应用程序中有一个Self Host WCF服务。

代码:

[ServiceContract]
public interface IMathService
{
    [WebInvoke(Method = "GET",
        UriTemplate = "Add/{num1}",
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json)]
    [OperationContract]
    int Add(string num1);
}

public class MathService : IMathService
{
    public int Add(string num1)
    {
        return Convert.ToInt32(num1) + 1;
    }
}
public Form1()
{
    InitializeComponent();
    WebServiceHost testHost = new WebServiceHost(typeof(MathService));
    testHost.Open();

}

App.Config:

<configuration>
  <startup>
    <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1" />
  </startup>
  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="true"/>
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="EndpBehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="ServiceBehavior" name="S3SelfHost.MathService">
        <endpoint address="http://localhost:8181/MathService" binding="webHttpBinding"

            contract="S3SelfHost.IMathService" behaviorConfiguration="EndpBehavior"/>
      </service>
    </services>
  </system.serviceModel>
</configuration>

我有一个纯HTML页面和一个js文件,我试图从中调用仅在本地计算机上运行的此服务。

JS:

$("#btnAdd").click(function () {
    jQuery.support.cors = true;
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=UTF-8; charset-uf8",
        url: 'http://localhost:8181/MathService/Add/1',
        success: function (data) {
            $("#result").val(result);
        },
        error: function (result) {
            alert(result);
        }
    });

});

如果我直接在浏览器中点击托管网址,那么它会向我显示正确的结果,但是当我在js代码中使用相同的网址时,它将在控制台中显示以下错误。

  

访问“ http://localhost:8181/MathService/Add/1”处的XMLHttpRequest   来自来源“ http://localhost”的信息已被CORS政策阻止:   对预检请求的响应未通过访问控制检查:否   请求中存在“ Access-Control-Allow-Origin”标头   资源。

在提琴手响应标题中显示

  

405方法不允许

1 个答案:

答案 0 :(得分:0)

对于由WebHttpBinding创建的自托管WCF服务,我们可以使用以下代码来启用对CORS的支持。
参考。

    using System;
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Channels;
using System.ServiceModel.Configuration;
using System.ServiceModel.Description;
using System.ServiceModel.Dispatcher;
using System.ServiceModel.Web;

端点行为扩展。

public class CustomHeaderMessageInspector : IDispatchMessageInspector
    {
        Dictionary<string, string> requiredHeaders;
        public CustomHeaderMessageInspector(Dictionary<string, string> headers)
        {
            requiredHeaders = headers ?? new Dictionary<string, string>();
        }
        public object AfterReceiveRequest(ref System.ServiceModel.Channels.Message request, IClientChannel channel, InstanceContext instanceContext)
        {
            return null;
        }

        public void BeforeSendReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
        {
            var httpHeader = reply.Properties["httpResponse"] as HttpResponseMessageProperty;
            foreach (var item in requiredHeaders)
            {
                httpHeader.Headers.Add(item.Key, item.Value);
            }

        }
    }
    public class CustomContractBehaviorAttribute : BehaviorExtensionElement, IEndpointBehavior
    {
        public override Type BehaviorType => typeof(CustomContractBehaviorAttribute);

        public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)
        {
        }

        public void ApplyClientBehavior(ServiceEndpoint endpoint, ClientRuntime clientRuntime)
        {
        }

        public void ApplyDispatchBehavior(ServiceEndpoint endpoint, EndpointDispatcher endpointDispatcher)
        {
            var requiredHeaders = new Dictionary<string, string>();

            requiredHeaders.Add("Access-Control-Allow-Origin", "*");
            requiredHeaders.Add("Access-Control-Max-Age", "1728000");
            requiredHeaders.Add("Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS");
            requiredHeaders.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Pragma, Cache-Control");
            endpointDispatcher.DispatchRuntime.MessageInspectors.Add(new CustomHeaderMessageInspector(requiredHeaders));
        }

        public void Validate(ServiceEndpoint endpoint)
        {

        }

        protected override object CreateBehavior()
        {
            return new CustomContractBehaviorAttribute();
        }
    }

在服务端点中应用它。

      <endpointBehaviors>
        <behavior name="EndpBehavior">
          <webHttp/>
          <CorsBehavior />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="ServiceBehavior" name="YourNamespace.MathService">
        <endpoint address="http://localhost:8181/MathService" binding="webHttpBinding"
            contract="YourNamespace.IMathService" behaviorConfiguration="EndpBehavior"/>
      </service>
    </services>
    <extensions>
      <behaviorExtensions>
        <add name="CorsBehavior" type="YourNamespace.CustomContractBehaviorAttribute, YourNamespace" />
      </behaviorExtensions>
    </extensions>
  </system.serviceModel>

客户端。

                //10.157.13.70 is the host that runs the Winform application.
   var serviceuri = "http://10.157.13.70:8181/MathService/add/34";
            $.ajax({
                method:"Get",
                url:serviceuri,
                //contentType:"application/x-www-form-urlencoded",
                success:function(data){
                    console.log(data);
                }
            }).done(function(data){
                console.log(data);
            }).fail(function(jqxhr,textstatus,err){
                console.log(err);
            })

结果。 enter image description here
随时让我知道问题是否仍然存在。