使用Angularjs和wcf寧靜服務製作http.post時發生CORS問題

Question

我是angularjs的新手，嘗試使用angularjs客戶端來使用wcf寧靜服務。初期我嘗試了http.get（url）並獲得了CORS問題我通過在我想調用的wcf服務方法中添加以下代碼來解決問題。

WebOperationContext.Current.OutgoingResponse.Headers.Add（ 「訪問控制允許來源」， 「」）; WebOperationContext.Current.OutgoingResponse.Headers.Add（「Access-Control-Allow-Methods」，「POST，GET，OPTIONS」）; WebOperationContext.Current.OutgoingResponse.Headers.Add（「訪問控制允許報頭」，「內容類型，接受」）;當我發了帖子調用（http.post）同*

現在我的方式得到我得到的迴應與CORS問題。

但是，當我試圖通過JSON對象，同時發佈帖子時，我再次開始獲取CORS問題。

我的后角碼爲：

var requestData = { 
      RequestUserName: "Abc1", 
      RequestPass: "123" 
     }; 

     var req = { 
        method: 'POST', 
        url: 'url', 
        headers: { 
         'Content-Type': 'application/json; charset=utf-8' 
        }, 
        data: requestData 
     }; 
     $http(req).success(function(){console.log("Success"); 
     $scope.userDetails = response.UserNameAuthenticationResult;}).error(function(){console.log("Error");}); 

我的WCF經營合同看起來如下：

[WebInvoke(Method="POST",UriTemplate="/Authenticate" 
      ,RequestFormat=WebMessageFormat.Json 
      ,ResponseFormat=WebMessageFormat.Json 
      ,BodyStyle = WebMessageBodyStyle.Wrapped)] 

     string UserNameAuthentication(Request request); 

和方法的實現如下：

public string UserNameAuthentication(Request request) 
     { 
     WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*"); 
     WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST,GET,OPTIONS"); 
     WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept"); 

      return "true"; 
     } 

而且錯誤我得到如下：

**選項URL（匿名函數）@ angular.js：11442sendReq @ angular.js：11235serverRequest @ angular.js：10945processQueue @ angular.js：15552（匿名函數）@ angular.js：15568 $ @ EVAL angular.js：16820 $ digest @ angular.js：16636 $ apply @ angular.js：16928（匿名函數）@ angular.js：24551defaultHandlerWrapper @ angular.js：3398eventHandler @ angular.js：3386 localhost /：1 XMLHttpRequest無法加載 ​​。對 預檢請求的響應未通過訪問控制檢查：否 「所請求的 資源上存在」Access-Control-Allow-Origin「標頭。原因'http://localhost:14703'因此不允許 訪問。該響應具有HTTP狀態碼405。

Answer 1

CORS是瀏覽器和服務器設置之間的交互。

發佈請求和響應標頭將會很有用。

我假設您正在與位於不同域（如api.example.com）上的API（而不是www.example.com）進行交互。由服務器決定設置Access-Control-Allow-Origins響應頭。要允許所有來源作爲臨時措施，請將其設置爲「*」而不是空字符串，但很快應將其設置爲您網站的實際來源，例如www.example.com

實際上，您可能不希望它完全打開，因爲它可能是安全風險，有人可能會創建您的網站的假版本。

一個簡單的避免CORS的方法就是使用代理服務器。這樣所有請求都轉到同一個域（包括html和API）。如果運行Node應用程序，則可以使用node-http-proxy或類似的方法。如果您有自定義標題或數據，這也可以避免預檢請求。預檢請求是您在實際請求之前在API上看到的OPTIONS請求。

下面是預檢行爲的一些詳細信息： https://www.soasta.com/blog/options-web-performance-with-single-page-applications/

Answer 2

看起來像在服務器端沒有啓用CORS因爲OPTIONS方法是不理解。

也許試試這個：

protected void Application_BeginRequest(object sender, EventArgs e) 
{ 
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); 
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS") 
    { 
     HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE, OPTIONS"); 

     HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000"); 
     HttpContext.Current.Response.End(); 
    } 
}