C# 发布期间wcf rest和angularjs 400错误请求错误

单击按钮时，此函数被调用

$scope.CreateNewTopic = function () {
          var userdata = {
        "TopicName":$scope.topicname,
        "TopicDescription": $scope.topicdescription,
        "OriginalPosterID": $scope.userid,
        "CategoryID": $scope.selectedcategory.CategoryID
          };
      DataService.InsertTopic(userdata);
    };

我的角度服务方法

angular.module('DFApp').factory('DataService', function ($http, $log) {
    var connectionurl = 'http://localhost:8020/DFServices.svc/'
    return {
            InsertTopic: function (topic) {
            $http({
                method: 'POST',
                url: connectionurl + 'InsertNewTopic',
                contentType: "application/json; charset=utf-8",
                data: topic,
            })
            .success(function (data, status, headers, config) {
                // successcallback(data); 
                console.log(data);
            })
            .error(function (data, status, headers, config) {
                $log.warn(data, status, headers, config);
            })
        },

    }
});

WCF法

public int InsertNewTopic(InsertNewTopic InsertTopicObject) {

            return SqlHelper.ExecuteNonQuery(SqlConnectionString.GetConnection(), CommandType.StoredProcedure, Constants.DF_InsertNewTopic.ToString(), new SqlParameter("TopicName", InsertTopicObject.TopicName), new SqlParameter("TopicDescription", InsertTopicObject.TopicDescription), new SqlParameter("OriginalPosterID", InsertTopicObject.OriginalPosterID), new SqlParameter("CategoryID", InsertTopicObject.CategoryID));

        }

对应接口

    [OperationContract]
    [WebInvoke(Method = "POST", UriTemplate = "/InsertNewTopic", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
    int InsertNewTopic(InsertNewTopic InsertTopicObject);

InsertNewTopic是Datacontract，如下所示

[DataContract]
    public class InsertNewTopic
    {
        [DataMember]
        public string TopicName { get; set; }
        [DataMember]
        public string TopicDescription { get; set; }
        [DataMember]
        public string OriginalPosterID { get; set; }
        [DataMember]
        public int CategoryID { get; set; }
}

Web配置文件

 <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" maxRequestLength="2147483647" />
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
  </system.web>
  <system.serviceModel>
    <services>
      <service name="DF.ServiceApi.DFServices" behaviorConfiguration="webHttpBehaviour">
        <endpoint binding="webHttpBinding" contract="DF.ServiceApi.IDFServices"   behaviorConfiguration="webEndPointBehaviour"
                  bindingConfiguration="webDFBinding"></endpoint>
        <endpoint contract="IMetadataExchange"                  binding="mexHttpBinding"                  address="mex" />
      </service>
    </services>
    <behaviors>
      <endpointBehaviors>
        <behavior name="webEndPointBehaviour">
          <webHttp/>
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="webHttpBehaviour">
          <!-- To avoid disclosing metadata information, set the values below to false before deployment -->
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
          <serviceThrottling maxConcurrentCalls="100" maxConcurrentInstances="10" maxConcurrentSessions="5" />
          <serviceTimeouts transactionTimeout="00:20:00" />

          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <bindings>
      <webHttpBinding>
        <binding name="webDFBinding" closeTimeout="00:20:10" openTimeout="00:20:00" sendTimeout="00:20:00" receiveTimeout="00:20:00" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" transferMode="Streamed" maxBufferSize="2147483647"
                 contentTypeMapper=""
                 >
          <readerQuotas maxArrayLength="2147483647" maxBytesPerRead="4096" maxNameTableCharCount="2147483647" maxDepth="32" maxStringContentLength="8192" />
          <security mode="None">
          </security>
          <!--<security mode="Transport">
                <transport clientCredentialType="None" />
            </security>-->
        </binding>
      </webHttpBinding>
    </bindings>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" closeIdleServicesAtLowMemory="true" multipleSiteBindingsEnabled="true" />
    <standardEndpoints>
      <!--<webHttpEndpoint>
      <standardEndpoint name="" contentTypeMapper="Microsoft.Samples.WebContentTypeMapper.JsonContentTypeMapper, JsonContentTypeMapper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    </webHttpEndpoint>-->
    </standardEndpoints>
    <protocolMapping>
      <add scheme="http" binding=""/>

    </protocolMapping>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="true" />
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <!-- Inserted below code for enabling Webservices to allow CORS - Cross Origin Resource Sharing -->
    <httpProtocol>
      <customHeaders>
        <!--<add name="Access-Control-Allow-Origin" value="*"/>-->
      </customHeaders>
    </httpProtocol>
  </system.webServer>

为了运行我的Web服务，我使用WebMatrix。
我希望有人能帮助我，因为我的日子像地狱一样白白浪费。
这是一个CORS问题，应该从WCF服务端解决

首先，必须在web.config上启用CORS

<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>

图片在哪里？我已经附上了图片。在链接中。
protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}