javascript - Angular.js $resource 与 ASP.Net webapi？

Question

我有一个简单的 ASP.Net WebAPI 服务，它在 POST/PUT 上分配一个静态变量并在 GET 上返回值:

private static State Repo = null;

public State Get()
{
    return Repo;
}

public void Post(State value)
{
    Repo = value;
}

public void Put(State value)
{
    Repo = value;
}

我有一个像这样定义的 Angular 资源:

var stateService = angular.module('StateService', ['ngResource']);

stateService.factory('State', function ($resource) {
    return $resource('http://localhost:8080/API/State');
});

当我尝试这样做时:

State.get(function (state) {
    $scope.data = state.data !== undefined ? state.data : '[Not Set]';

    state.data = "newvalue";
    state.$save();
});

get() 工作正常，但是 $save() 在 chrome 中抛出这个错误:

XMLHttpRequest cannot load http://localhost:8080/API/State. Invalid HTTP status code 405 

webAPI 已经启用了 CORS(返回 Access-Control-Allow-Origin: *)。我错过了什么？

Answer 1

对于某些 CORS 请求，浏览器会在发送对资源的实际请求之前发送一个额外的请求，称为“预检请求”。

飞行前请求使用 HTTP OPTIONS(405 状态代码)方法。它包括两个特殊的 header :

• Access-Control-Request-Method:将用于的 HTTP 方法 实际要求。
• Access-Control-Request-Headers:请求列表 应用程序根据实际请求设置的 header 。 (再次，这个 不包括浏览器设置的 header 。)

即使您启用了 CORS，并且它正在为 GET 工作请求，你告诉它正在显示 405 HTTP Status对于 POST要求。这是因为，POST,PUT,DELETE请求不是安全请求，他们先发送请求OPTIONS请求，您必须回应，这将需要 hedaers，例如 Access-Control-Allow-Origin: * , Access-Control-Allow-Methods: POST , 然后它会再次发送 POST request ，然后它就会工作。

请验证您在响应中发送的 header 是什么。即要成功 CORS POST请求，至少你必须发送Access-Control-Allow-Methods: POST连同 Access-Control-Allow-Origin: * .

启用 CORS 的步骤:

1. 安装此 - 使用 NuGet 安装包 Microsoft.AspNet.WebApi.Cors
2. 打开文件 App_Start/WebApiConfig.cs。将以下代码添加到 WebApiConfig.Register 方法。

3. 接下来，将 [EnableCors] 属性添加到 Controller 类:

   带有以下参数

   [EnableCors(来源:“您的域”， header :“*”，方法:“POST”)]

4. 重新部署您的 WebAPI 项目。

来源 - http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

更多链接- http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En