AngularJS + ASP.NET Web API跨域问题

Question

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

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

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

我已经从以下帖子实现了CORS操作选择器:在Web API项目中启用CORS.即使很难,我也可以从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);
})

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>

Answer 2

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

即使有了正确的 CORS 实现，我在 IIS 7 中也遇到了一个非常奇怪的问题，该问题是通过启用 WebDav 的所有动词来解决的（是的，WebDav - 不要问我为什么我只是按照博客文章上的说明进行操作 :-D）。

做这个：

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

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