• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

如何正确实现Spring+angularjs POST跨域提交

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1. 先来看看跨域时到底发生了什么?

​ 当浏览器端发生js向服务端发送跨域请求时,浏览器会判断是否跨域,如果是跨域请求,则会在发送真实请求前,发送一次OPTIONS(如图(1))预检请求,服务器端会根据预检请求header判断是否满足跨域条件;当服务端预检符合跨域条件,则浏览器(Browser)才会再发送真实的请求(如图(2))至服务器端,请求通过即可正确返回,否则,会返回如下错误:XMLHttpRequest cannot load ‘http://localhost:8080/security/crossDomain’. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:63342’ is therefore not allowed access.

​ angularjs跨域提交成功,chrome浏览器的请求记录如下图:

​ 从截图可以看出,angularjs发送跨域请求时提交了2次同样的请求,第一次请求为options方法,第二次才是post提交数据的方法。


2. 如何使用spring + angularjs实现跨域POST提交

2.1 服务端Server实现,添加header属性如下

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
response.addHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

​ PS:在SpringMVC框架中,需要将这段代码加入自定义filter中进行全局过滤处理,否则直接放在具体的业务controller可能会无效;另外在自定义interceptor添加这段代码也会无效,原因是跨域第一次OPTIONS预检请求在filter阶段就验证不通过,根据HttpServletRequest执行的顺序(listen->filter->servlet),interceptor类无法拦截OPTIONS请求。

2.2 前端angularjs实现POST跨域提交

var app = angular.module('app', []);
app.factory('requestInterceptor', ['$q', requestInterceptor]);
function HttpInterceptor($q) {
    return {
        request: function(config){
            config.headers = config.headers || {};
            config.headers['Authorization'] = "uShoSR0Oyy1bpgfZ/48VjyrnmjC3ALDv65KN+o+eQ04=";
            return config || $q.when(config);
        }
    };
}
// 全局拦截器,跨域Post数据默认提交格式为application/x-www-form-urlencoded 通过拦截器修改为application/json
app.config(['$httpProvider', function($httpProvider){
    $httpProvider.interceptors.push("requestInterceptor");
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/json';
}]);

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method:'POST',
        url:'http://localhost:8080/security/crossDomain',
        data:{"biz":"biz100010"}
    }).success(function(req){
        console.log(req);
    })
});

2.3 Spring Controller获取POST数据

@RequestMapping("/crossDomain")
@ResponseBody
public String crossDomain(HttpServletRequest request, HttpServletResponse response, @RequestBody String requestBody) {
    System.out.println("requestBody:" +requestBody);
    return "success";
}

​用注解@RequestBody的方式获取browser端提交的数据data,在这里使用request.getParameter(“biz”)的值为null.


鲜花

握手

雷人

路过

鸡蛋
专题导读
上一篇:
Markdown语法教程发布时间:2022-05-14
下一篇:
Google谷歌开源新的图片编码算法Guetzli,可将图片大小缩小35%发布时间:2022-05-14
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap