AngularJS使用JSONP跨域问题（后台WebApi）

这两天接到项目，项目框架是同事已经搭到的，大概看了一下，用的是AngularJS框架，表示没用过，临时看了一下文档，还好文档通俗易懂，整体不是很难，大概算是有个了解。
附上教程地址：AngularJS教程
好了，下面说正事，由于项目需求，整个项目都是调用的Api，那么问题来了，MVC WebApi也是同事搭的，但是并没有考虑到跨域问题，所有Api在一个项目里面单独存在，A项目要用js访问Api的接口，所以项目开始之前的第一个问题来了，跨域。
刚开始先用了JQuery Ajax来调用接口，OK，访问成功了，欣喜之余发现了一个小bug，就是在数据返回成功后不能及时刷新，对于我这样js入门级别的小菜鸟来说，一脸懵逼。

页面代码

<div ng-app="myApp" ng-controller="getCity">
        <select ng-model="selectedSite" ng-options="x.city for x in selectedModel"></select>
        你选择的是: {{selectedSite.city}}
        编号为: {{selectedSite.cityid}}
        提示信息  {{msg}}
    </div>

Controller（js）代码

var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
    $.ajax({
        type: "get",
        url: "http://localhost:8000/api/Account/City",
        dataType: "jsonp",
        data: {},
        success: function (data, status) {
            $scope.selectedModel = data.AppendData;
            $scope.msg = data.Message;
        },
        error: function (e) {
            
        },
        complete: function () {

        }
    });
    //$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
    //.success(function (response) {
    //    $scope.selectedModel = response.AppendData;
    //    $scope.msg = response.Message;
    //});
});

现在就已经看到问题了吧，Ajax调用接口成功了，但是页面却没有更新数据，这就很难受了，好吧，放弃，不纠结了，还是去看看AngularJS的HTTP吧
附上PHP Ajax 跨域问题最佳解决方案
用PHP的朋友可以看看，我们继续
AngularJS实现跨域的几种方法
文档里面也介绍了，我没有犹豫，还是选择使用JSONP。

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
//  The name of the callback should be the string JSON_CALLBACK.

以上是文档介绍的方法，我试了一下，访问成功了，但是返回的数据不会，大家都知道的，使用jsonp访问api要返回指定格式的数据，这里不多说，下面配图，然后现在的问题就是，虽然访问成功了，但是返回的数据却是json类型，js报错

2.png

走到这里其实就已经很简单了，我去api项目里面看了一下后台的配置，发现这样访问是进不到配置的设置里面的，参数不对，我就做了一些调整

var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
    $http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
    .success(function (response) {
        $scope.selectedModel = response.AppendData;
        $scope.msg = response.Message;
    });
});

把jsonp=...换成我在后台配置的参数
好吧，问题解决了，看到这里我想很多人想对我说一句第四音的：“卧槽！”
其实我的内心也是这样想的下面我配上MVC WebApi后台支持跨域的代码跟jsonp返回数据格式的截图：

3.png

这里是用AngularJs返回的，Ajax跟这个返回也是不一样的，有兴趣的可以去上面配图里面找找看。

AngularJS使用JSONP跨域问题（后台WebApi）

推荐阅读更多精彩内容