12

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

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

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

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

关于 AngularJS 和跨域调用，我有什么需要注意的吗？我的困境有什么可能的解决方案吗？

谢谢。

4

4 回答 4

11

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

网页配置

    <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-13T09:39:35.953 回答
3

在使用带有 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 站点上找到其他详细信息 。

于 2015-04-16T18:38:54.677 回答
0

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

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

做这个：

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

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

于 2013-02-18T09:46:12.230 回答
-1

大多数开发人员在 Localhost 上运行 UI 和服务时都会遇到这个问题 - 有很多方法可以解决这个问题 - 许多开发人员倾向于在浏览器级别修复它“但这是一个安全漏洞。

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

观看CORS - 实现跨域资源共享（“解释 - 跨域资源共享”）！

于 2018-03-16T17:19:41.187 回答