当前位置: 首页>>编程语言>>正文


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

yangfan 编程语言 , , , 去评论

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

cross_request

​ 当浏览器端发生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浏览器的请求记录如下图:

image

​ 从截图可以看出,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.

本文由《纯净的天空》出品。文章地址: https://vimsky.com/article/2252.html,未经允许,请勿转载。

相关文章



猜你喜欢