Question

继续我的移动应用程序开发学习过程，我发现了一个新的障碍：跨源请求共享或CORS。

我正在使用AngularJS + jQuery Mobile（Cordova手机客户端）和ASP.NET Web API（后端）的组合。我的问题是我无法完成对API控制器的POST请求（或任何其他类型的请求）。

我的AngularJS控制器使用$http.post()服务方法来调用Web API控制器。但是，Chrome调试器表示OPTIONS请求中的调用失败（可能是CORS预检请求）。

我已经从以下帖子中实现了CORS操作选择器：Enabling CORS in Web API Project。即使很难，我也可以从Fiddler调用api方法，AngularJS一直在OPTIONS预检请求上失败。

关于AngularJS和跨域调用，我应该注意什么？我的困境有什么可能的解决办法吗？

感谢。

Answer 1

您可以使用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);
})

网址：

[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>

Answer 2

虽然使用带有Microsoft Web API 2的AngularJS 1.3遇到了这个问题，但我找到了一个简单的CORS配置问题解决方案。

首先来自Nuget intall - Microsoft 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。

Answer 3

查看Thinktecture Cors对象，使用那些（nugettable），您可以在WebApi中获得完整的CORS支持，而无需任何代码。

即使有正确的CORS实现，我也有一个非常奇怪的问题，IIS 7通过启用WebDav的所有动词来解决（是的，WebDav - 不要问我为什么我只是按照博客文章中的说明： - d）。

这样做：

打开IIS管理器，转到应用程序的处理程序映射。
双击WebDav处理程序
点击“请求限制”
在“动词”标签上，选择“所有动词”。

同样，不知道为什么WebApi使用WebDav，但这解决了POST和DELETE的问题，尽管CORS实现正确，但这些问题都无法解决。

Answer 4

大多数开发人员在Localhost上运行UI和服务时都面临着这个问题 - 有很多方法可以解决这个问题 - 很多开发人员倾向于在浏览器级别修复它＆＃34;但这就是安全漏洞。

正确的方法是在您的Web服务层修复此问题 - 以下视频将解释并解决此问题

观看CORS- Implementing Cross Origin Resource Sharing（＆＃34;解释 - 跨源资源共享＆＃34;）

AngularJS + ASP.NET Web API跨域问题

4 个答案: