asp.net-web-api - AngularJS + ASP.NET Web API 跨域问题

Question

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

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

我的 AngularJS Controller 使用 $http.post()调用 Web API Controller 的服务方法。但是，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);
})

网络接口(interface):

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