Angular JS 跨域

最新推荐文章于 2021-02-13 08:15:14 发布

N_ou25

最新推荐文章于 2021-02-13 08:15:14 发布

阅读量775

点赞数

分类专栏： JS 前端 Angular JS 文章标签： angular 前端

本文链接：https://blog.csdn.net/N_ou25/article/details/51533945

版权

JS 前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Angular JS

2 篇文章 0 订阅

订阅专栏

$http get

这种跨域方式，是通过后台配置response来实现的。
前端：

$http.get("http://localhost:8080/hscloud/test/get").success(
    function(data){
                alert(data);
    });

后台配置：

public boolean preHandle(HttpServletRequest request,
            HttpServletResponse response, Object handler) throws  Exception {

    String url = request.getRequestURI();
    if(url.startsWith("/hscloud/test")){
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods","GET,POST");
        response.setHeader("Access-Control-Allow-Headers","X-Requested-With, Content-Type");
    }

    return true;
}

$http post

注意：这里post实际是将参数放在header里面存储的，面前还没有找到将数据存放在body里面进行跨域请求的方法。后面找到会进行补充。
后台代码同上。
前端：

$http({
    url:'http://localhost:8080/hscloud/test/post',
    method:'POST',
    params:{test:'ttttt'},
    data:{ttt:'ttttttttttttttt'},
    headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).success(function(data){
    console.log(data);
}).error(function(){});

JSONP 方式

这种方式目前只支持get请求

$http.jsonp("http://192.168.150.135:5000/v1/search?callback=JSON_CALLBACK")
.success(function(data){
        console.log(JSON.stringify(data));
    });