Ajax需要带头信息跨域问题的解决

佚名 7年前 (2019-04-19) 随笔 1233人围观抢沙发百度已收录

 1 $.ajax({
 2       type:"get",
 3       url:"http://localhost:8082/index/getMsg",
 4       dataType:'json',
 5       headers: {
 6         "Content-Type": "application/x-www-form-urlencoded",
 7         "token":"token"
 8       },
 9 
10       success:function(data){
11         console.log(data)
12         if(data.status == "0"){
13           //登录成功
14         }else {
15           alert(data.msg)
16         }
17       },
18       error:function(data){
19         console.log(data)
20       }
21 
22     });

前端代码

"Content-Type": "application/x-www-form-urlencoded",是必填项

response.setHeader("Access-Control-Allow-Origin", "*");
        String token = request.getHeader("token");
       // System.out.println("filter origin:"+token);//通过打印，可以看到一次非简单请求，会被过滤两次，即请求两次，第一次请求确认是否符合跨域要求（预检），这一次是不带headers的自定义信息，第二次请求会携带自定义信息。
        if ("OPTIONS".equals(request.getMethod())){//这里通过判断请求的方法，判断此次是否是预检请求，如果是，立即返回一个204状态吗，标示，允许跨域；预检后，正式请求，这个方法参数就是我们设置的post了
            response.setStatus(HttpStatus.SC_NO_CONTENT); //HttpStatus.SC_NO_CONTENT = 204
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");//当判定为预检请求后，设定允许请求的方法
            response.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization"); //当判定为预检请求后，设定允许请求的头部类型
            response.addHeader("Access-Control-Max-Age", "1");
            chain.doFilter(request, response);
            return;
        }