带有参数CORS错误的WCF角柱

Question

我在角度上很新。 现在，我在向WCF进行角度POST时遇到了一些问题。

这是WCF合同：

[OperationContract]    
    [WebInvoke(Method = "POST",
     ResponseFormat = WebMessageFormat.Json,
     RequestFormat = WebMessageFormat.Json,     
     UriTemplate = "/InsertJSONSTRING/")]

     void InsertJSONSTRING(DyeMaster value);

这是角度控制器

app.controller('UploadCOJSON', function ($scope, $http) {

    $scope.SendData = function () {

        function DYE() {
            this.DESCRIPTION;
            this.COLOR_CODE;
        }

        $scope.dye = new DYE();
        $scope.dye.DESCRIPTION = $scope.DESCRIPTION;
        $scope.dye.COLOR_CODE = $scope.COLOR_CODE;    

        var dataR = JSON.stringify($scope.dye);

        $http({
            url: "http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING",            
            method: "POST",            
            data: dataR,            
            dataType: "json",            
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        });
    }
});

这是错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING. This can be fixed by moving the resource to the same domain or enabling CORS.

不知何故，当我排除参数（数据）时，它可以正常工作而没有任何错误。

$http({
            url: "http://localhost:63599/ServiceMobileListener.svc/InsertJSONSTRING",            
            method: "POST",                        
            dataType: "json",            
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        });

注意：已按照http://enable-cors.org/server_wcf.html所述执行启用CORS

感谢您的帮助。

Answer 1

您必须在inspect元素中查看您的network标签，它必须在POST请求之前发出OPTIONS请求。 您将需要使用CORS标头回复服务器端的选项请求。

当您不发送数据时，浏览器一定不会发出OPTIONS请求，因此在这种情况下它可以正常工作。

对于选项请求的答复

添加这些标题

"Access-Control-Allow-Origin", "http://my.requestmaking-site.com"
"Access-Control-Allow-Methods", "POST, GET, OPTIONS"

如果允许身份验证，则可以选择

"Access-Control-Allow-Headers", "Content-Type, Authorization"
"Access-Control-Allow-Credentials", "true"

无需在回复正文中发送任何内容

Answer 2

只需在web.config文件中添加这些参数即可。

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"/>
      </customHeaders>
    </httpProtocol>