获取响应为"data":null,"status": - 从AngularJS调用web api时为1

Question

获取响应为"data":null,"status": - 从AngularJS调用web api时为1

sim*_*ser 0 asp.net-web-api angularjs angularjs-http

我试图从Angular JS 1.6.0调用Web API GET方法并得到以下错误: -

可能未处理的拒绝:{"data":null,"status": - 1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam" :"callback","url":" http:// localhost:51972/api/video ","headers":{"Accept":"application/json,text/plain,/ "}},"statusText": ""}

当我从Fiddler 4调用相同的GET方法并返回JSON Text时,我得到了正确的JSON响应.

请注意,我的WEB API和Angular JS代码位于不同的目录中.

根据Dez的评论,我修改了WebApiConfig.cs以从WebAPI返回JSON响应

WebApiConfig.cs

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            // Web API routes
            config.MapHttpAttributeRoutes();

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

            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
            config.Formatters.Remove(config.Formatters.XmlFormatter);
        }
    }

Run Code Online (Sandbox Code Playgroud)

VideoController.cs

public class VideoController : ApiController
{
        [Route("api/video")]
        public List<VideoViewModel> GetVideo()
        {
            List<VideoViewModel> video = new List<VideoViewModel>();
            video.Add(new VideoViewModel { Name = "Hello World", Desc = "Hello World Desc" });
            video.Add(new VideoViewModel { Name = "Hello World1", Desc = "Hello World Desc1" });
            return video;
        }
}

Run Code Online (Sandbox Code Playgroud)

当我输入' http:// localhost:51972/api/video '并点击时,我得到正确的响应(JSON),如下所示: -

 [{"Name":"Hello World","Desc":"Hello World Desc"},{"Name":"Hello World1","Desc":"Hello World Desc1"}]

Run Code Online (Sandbox Code Playgroud)

Home.html中

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="../Scripts/AngularControllers/AddVideoController.js"></script>
</head>
<body ng-app="modVid" ng-controller="ctrlVidAdd">
      <table class="table">
        <tr>
            <th>Name</th>
            <th>Desc</th>
       </tr> 
       <tr ng-repeat="a in selectedDisplay">
            <td>{{a.Name}}</td>
            <td>{{a.Desc}}</td>
        </tr>
    </table>
</body>

Run Code Online (Sandbox Code Playgroud)

AddVideoController.js

var myApp = angular.module("modVid", []);
myApp.controller("ctrlVidAdd", function ($scope, $http) {
$http.get('http://localhost:51972/api/video').then(function (response) {
        alert("Hello");
        $scope.selectedDisplay = response.data;
    });
});

Run Code Online (Sandbox Code Playgroud)

当我尝试从Angular JS调试WEB API Get调用时,我可以看到它正在调用Web API Get方法,但是没有从Web API返回.正如你所看到的那样,我在$ http end的响应中设置了警报,这也没有得到执行.

任何帮助,将不胜感激.

Answer 1

Mic*_*nox 6

您可能需要启用CORS:

在WebApiConfig.cs文件中,添加以下内容:

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Run Code Online (Sandbox Code Playgroud)

CORS是浏览器在使用脚本进行调用时执行相同原始策略的检查.使用Fiddler之类的东西或直接在浏览器中访问api时,您将看不到它.

归档时间：	9 年，2 月前
查看次数：	5678 次
最近记录：	7 年，9 月前