美文网首页程序员WEB前端程序开发手机移动程序开发
AngularJS使用JSONP跨域问题(后台WebApi)

AngularJS使用JSONP跨域问题(后台WebApi)

作者: 人说狂徒富贵在青春 | 来源:发表于2017-01-23 17:39 被阅读1411次

这两天接到项目,项目框架是同事已经搭到的,大概看了一下,用的是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)

    这两天接到项目,项目框架是同事已经搭到的,大概看了一下,用的是AngularJS框架,表示没用过,临时看了一下文档...

  • 浏览器跨域问题,教你手写实现jsonp跨域

    跨域概述为什么会有跨域跨域解决办法:1、jsonp;2、后台代理手写实现jsonp跨域(包括服务器端代码) 跨域问...

  • 对jsonp 的理解认识

    什么是跨域?为什么要跨域呢?听说jsonp能. 为什么jsonp能跨域呢?什么时候使用jsonp?怎么使用json...

  • 交互那些事(二)

    说完ajax我想必须说说jsonp了,谈到jsonp就必须先说说跨域,首先ajax是不能跨域的,除非后台允许跨域或...

  • 使用JSONP解决ajax跨域

    在日常开发中,不免遇到跨域的问题。在这里我们介绍使用Jsonp来解决ajax跨域的问题 什么是跨域? 跨域,指的是...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 跨域上传图片并预览

    跨域上传文件 之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求,JSONP原理是让服务器把数据...

  • Flask-cors跨域

    什么是跨域 为什么要考虑跨域问题 同源策略 解决跨域问题 方式一: 使用 JSONP (一种非Ajax技术,需要前...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 复习jsonp和promise

    一.jsonp 1.jsonp是跨域访问api,ajax不能跨域 2.在vue中使用jsonp首先要安装jsonp...

网友评论

    本文标题:AngularJS使用JSONP跨域问题(后台WebApi)

    本文链接:https://www.haomeiwen.com/subject/cavabttx.html