AngularJS + ASP.NET Web API 跨域问题

问题描述

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

Moving forward with my mobile app development learning process, I've found a new obstacle: Cross-origin Request Sharing or CORS.

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

I am using a combination of AngularJS + jQuery Mobile (Cordova phone client) and ASP.NET Web API (backend). My issue is that I have not been able to complete a POST request (or any other type of request) to an API controller.

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

My AngularJS controller uses the $http.post() service method to call the Web API controller. However, Chrome debugger says that the call failed in an OPTIONS request (possibly the CORS preflight request).

我已经实现了以下帖子中的 CORS 操作选择器:在 Web API 项目中启用 CORS.即使很难我可以从 Fiddler 调用 api 方法，AngularJS 仍然在 OPTIONS 预检请求上失败.

I have implemented the CORS action selector from the following post: Enabling CORS in Web API Project. Even tough I can call the api method from Fiddler, AngularJS keeps failing on the OPTIONS preflight request.

关于 AngularJS 和跨域调用有什么我应该注意的吗?我的困境有什么可能的解决方案吗?

Is there anything I should be aware of about AngularJS and cross-domain calls? Any possible solution to my predicament?

谢谢.

推荐答案

您可以使用 content-type 跳过预检选项请求:application/x-www-form-urlencoded.

You can skip the preflight option request by using 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);
})

网络 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>

这篇关于AngularJS + ASP.NET Web API 跨域问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！