從AngularJS內容類型問題發布到WCF服務

Question

首先，對於這段時間的長度，我們深表歉意，但我想提供盡可能多的信息。 我正在編寫我的第一個打字稿/角度應用程序，並嘗試調用我們現有的IIS WCFservices。 呼叫是跨域的。 感謝您的任何投入。

服務合同：

[OperationContract]
[WebInvoke(Method = "POST",
    RequestFormat = WebMessageFormat.Json,
    ResponseFormat = WebMessageFormat.Json,
    UriTemplate = "LoginUser", 
    BodyStyle = WebMessageBodyStyle.Wrapped)]
LoginResponse LoginUser(LoginRequest request);

TypeScript請求：

class LoginRequest implements ILoginRequest {
    UserName: string;
    Password: string;
    ReturnListOfQueues: boolean;
}

Angular / Typescript登錄方法：

loginUser(UserName: string,
    Password: string,
    DomainName: string,
    ReturnListOfQueues: boolean): ng.IPromise<ILoginResponse> {

        var base_url = 'http://[IP]/AuthenticationService.svc/rest/LoginUser';

        var request = new LoginRequest();
        request.UserName = UserName;
        request.Password = Password;
        request.ReturnListOfQueues = ReturnListOfQueues;

        var req = {
            method: 'POST',
            url: base_url,
            headers: { 'Content-Type': undefined },
            data: JSON.stringify({ request: request }),
            contentType: "application/json",
            dataType: "json",
        }


        return this.$http(req)
            .then((response: ng.IHttpPromiseCallbackArg<ILoginResponse>): ILoginResponse=> {
            return <ILoginResponse>response.data;
            });
}

當我像上面那樣使用headers: { 'Content-Type': undefined }調用它時，JSON顯示在Fiddler中，但是Content-Type是`text / plan'並且出現400請求錯誤

我還不能發布圖片，所以這里是提琴手屏幕截圖的鏈接https://goo.gl/photos/m75uzHi3E9KdkZhw5

如果我在Fiddler中編輯/重新發出請求並將Content-Type更改為application / json，則將成功調用該服務，並且會獲得預期的響應數據。

當我更改使用application / json的請求時，數據不再顯示在Fiddler中

var req = {
    method: 'POST',
    url: base_url,
    headers: { 'Content-Type': "application/json" },
    data: JSON.stringify({ request: request }),
    contentType: "application/json",
    dataType: "json",
}

Fiddler screencap2： https ： //goo.gl/photos/VeJd9HSX46svA1HZ6

設置內容類型時，我也在Firefox中收到CORS消息

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [removed]. (Reason: CORS preflight channel did not succeed). 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [removed]. (Reason: CORS request failed).

web.config申請服務

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
        <add name="Access-Control-Max-Age" value="1728000" />
    </customHeaders>
</httpProtocol>

    <behavior name="restBehavior">
        <webHttp helpEnabled="true" defaultOutgoingResponseFormat="Json"  automaticFormatSelectionEnabled="false" />

    </behavior>

更新：我關注了這篇博文blogs.microsoft.co.il/idof/2011/07/02/cross-origin-resource-sharing-cors-and-wcf/

現在，當我使用headers: { 'Content-Type': "application/json" }發送請求時headers: { 'Content-Type': "application/json" } ，我不再收到405錯誤。 它發送OPTIONS請求，該請求返回200 OK，但從未發出POST請求。

Answer 1

可能是JSON.stringify生成了一些無效的JSON，因此您要發布無效的JSON數據嗎？

如果我嘗試反序列化包含在第一張圖片中的Request正文，則會出現以下錯誤：

解析布爾值時出錯。 路徑“ request.ReturnListOfQueues”，第1行，位置80。

我使用以下代碼：

JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":false\"}}");

如果我將其更改為：

JsonConvert.DeserializeObject("{\"request\": {\"UserName\": \"admin\", \"Password\": \"admin\",\"ReturnListOfQueues\":\"false\"}}");

它工作正常。 （在false之前添加了額外的雙引號。）

Answer 2

我在chrome中嘗試了該應用，並獲得了以下內容The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

我從web.config中刪除了此部分，現在可以正常工作了。 Angular在飛行前OPTIONS調用后進行后續POST

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
        <add name="Access-Control-Max-Age" value="1728000" />
    </customHeaders>
</httpProtocol>