java angularjs 跨域访问_AngularJS使用JSONP跨域问题（后台WebApi）

这两天接到项目，项目框架是同事已经搭到的，大概看了一下，用的是AngularJS框架，表示没用过，临时看了一下文档，还好文档通俗易懂，整体不是很难，大概算是有个了解。

附上教程地址：AngularJS教程

好了，下面说正事，由于项目需求，整个项目都是调用的Api，那么问题来了，MVC WebApi也是同事搭的，但是并没有考虑到跨域问题，所有Api在一个项目里面单独存在，A项目要用js访问Api的接口，所以项目开始之前的第一个问题来了，跨域。

刚开始先用了JQuery Ajax来调用接口，OK，访问成功了，欣喜之余发现了一个小bug，就是在数据返回成功后不能及时刷新，对于我这样js入门级别的小菜鸟来说，一脸懵逼。

页面代码

你选择的是: {{selectedSite.city}}

编号为: {{selectedSite.cityid}}

提示信息 {{msg}}

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跟这个返回也是不一样的，有兴趣的可以去上面配图里面找找看。