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跨域问题

回答

相关问题