Web API 通过 URL 加载，但从 Angular 脚本中获取错误 404答案

【问题标题】：Web API loads via URL but get Error 404 from Angular scriptWeb API 通过 URL 加载，但从 Angular 脚本中获取错误 404
【发布时间】：2014-05-01 20:43:45
【问题描述】：

我这里有一个 WebAPI 方法：

http://localhost:50463/api/movies

当从浏览器访问它时，它会完美加载。

在我的项目（与 Web API 所在的项目相同）中，当从 AngularJS 调用方法时，我收到错误 500：

加载资源失败：服务器响应状态为 500（内部服务器错误）

当我点击错误中的链接时，它会完美加载数据。

WebAPI的路由如下：

config.Routes.MapHttpRoute("DefaultApiGet", "Api/{controller}", 
    new {action = "Get"}, 
    new {httpMethod = new HttpMethodConstraint(HttpMethod.Get)}
);

这是角度调用

app.factory('dataFactory', function ($http) {

    var factory = {};

    factory.data = function (callback) {
        $http.get('/api/movies').success(callback);
    };

    return factory;
});

我添加这个 javascript 只是为了排除 Angular，我得到了同样的结果：

$.ajax({
url: "/api/movies",
type: 'GET',
//data: "{ 'ID': " + id + "}",
contentType: "application/json; charset=utf-8",
success: function(data) {
    alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
    alert(thrownError);
}
});

知道我做错了什么吗？

【问题讨论】：

MapHttpRoute 中的Api/ 不应该全部小写吗？
我从这里得到了路线，我不认为这个案子很重要stackoverflow.com/questions/9499794/…
你能发布你的控制器动作方法的代码吗？内部服务器告诉我，当您进行 ajax 调用时，该方法可能会失败。打电话时可能缺少参数？

标签： angularjs asp.net-web-api

【解决方案1】：

我假设您的 Web API 和 AngularJS 应用程序在不同的端口上运行。在这种情况下，您正在运行 Same-Origin-Policy 问题。

确保您的 Web API 使用 HTTP CORS 标头进行响应，例如：

Access-Control-Allow-Origin: http://<angular_domain>:<angular_port>

或

Access-Control-Allow-Origin: *

【讨论】：

端口正是 IIS Express 选择的，一切都在同一个端口上。
使用开发者工具查看浏览器发送了哪个请求（确切的 URL，500 是否有任何错误消息）？你使用哪个 URL 来访问你的 Angular 应用程序？

【解决方案2】：

在我看来这不是 CORS 问题，因为您在 $.ajax() 请求中使用了相对 URL。

你试过$.getJSON("/api/movies").then(successHandler, faulureHandler)

不确定这是否会有所帮助，但对于一个您正在发送带有不包含内容的 GET 请求的 contentType 标头。应该有一个 Accept 标头，但 WebAPI 应该没问题。

我还会从路由中删除约束并恢复为默认路由映射以查看问题是否存在。

config.Routes.MapHttpRoute("DefaultApi",
                "api/{controller}/{id}",
                new {id = RouteParameter.Optional});

【讨论】：