AngularJS + ASP.NET Web API跨域問題

隨着我的移動應用程序開發學習過程的發展，我發現了一個新的障礙：跨域請求共享或CORS。AngularJS + ASP.NET Web API跨域問題

我正在使用AngularJS + jQuery Mobile（科爾多瓦手機客戶端）和ASP.NET Web API（後端）的組合。我的問題是我無法完成一個POST請求（或任何其他類型的請求）到API控制器。

我的AngularJS控制器使用$http.post()服務方法調用Web API控制器。但是，Chrome調試器說，OPTIONS請求中的調用失敗（可能是CORS預檢請求）。

我已經實施了CORS動作選擇器從以下帖子：Enabling CORS in Web API Project。即使困難，我可以從Fiddler中調用api方法，但AngularJS在OPTIONS預檢請求上仍然失敗。

有什麼我應該知道AngularJS和跨域調用？任何可能的解決方案，以我的困境？

謝謝。

2012-08-02 Luis Aguilar

[另一個angularjs問題重新：選項]（http://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource） – johlrich 2012-09-22 13:37:10

查看Thinktecture Cors對象，通過這些（nugettable），您可以在WebApi中獲得完整的CORS支持，而無需您自己編寫任何代碼。

即使使用正確的CORS實現，我已經遇到了一個非常奇怪的問題，IIS 7通過爲WebDav啓用所有動詞解決了（是的，WebDav - 不問我爲什麼只遵循博客文章中的說明： -D）。

這樣做：

打開IIS管理器，進入到應用程序的處理程序映射。
雙擊的WebDav處理器
點擊「請求限制」
在「動詞」選項卡，選擇「所有動詞」。

再一次，不知道爲什麼WebApi使用WebDav，但這解決了POST和DELETE的問題，即使CORS實現正確，也無法工作。

來源

2013-02-18 09:46:12

您可以使用content-type：application/x-www-form-urlencoded跳過預檢選項請求。

AngularJS：

var user = { 
    ID: 1, 
    Name: 'test' 
}; 

$http({ 
    url: "api.localhost/api/users/addUser", 
    method: "POST", 
    data: $.param(user), 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    withCredentials: true, 
    }).success(function (data, status, headers, config) { 
    console.log(data); 
})

的Web API：

[HttpPost] 
public string AddUser(User user) 
{ 
    // Do something 
    return user.Name + " added"; 
}

的Web.config

<system.webServer> 
     <validation validateIntegratedModeConfiguration="false" /> 
      <handlers> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
       <remove name="OPTIONSVerbHandler" /> 
       <remove name="TRACEVerbHandler" /> 

       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
      </handlers> 
      <httpProtocol> 
       <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="http://localhost" /> 
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" /> 
        <add name="Access-Control-Allow-Credentials" value="true" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
       </customHeaders> 
      </httpProtocol> 
     </system.webServer>

來源

2014-02-13 09:39:35 Henke

這工作與Microsoft.AspNet.WebApi.Cors和沒有web.config部分 – Samuel 2018-03-06 16:06:10

雖然磕磕絆絆到這個國際空間站使用AngularJS 1.3和Microsoft Web API 2我發現了CORS配置問題的簡單解決方案。

從的NuGet intall首先 - 微軟的WebAPI一個Cors
```
Install-Package Microsoft.AspNet.WebApi.Cors 
```

在WebApiConfig.cs文件

然後：

var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*"); 

config.EnableCors(cors);

您還可以用能夠CORS無處不在*而不是你的網站，但是這打敗了CORS的目的，並打開安全漏洞 - 但你可以做它的測試。

WebApi.Cors程序集還允許您通過控制器或其他更細粒度的細節啓用cors控制器。其他詳細信息可在Web API網站上找到here。

來源

2015-04-16 18:38:54 kmcnamee

config.EnableCors（）; 應該是 config.EnableCors（cors）; – user3484993 2016-12-16 11:57:26

@ user3484993謝謝我更新了答案。 – kmcnamee 2016-12-16 14:27:45

哦，謝謝你，先生，它解決了我的問題。 – 2017-02-16 11:21:18

AngularJS + ASP.NET Web API跨域問題

回答

相關問題