ajax error怎么解决

Posted 2023-05-05

参考技术A ajax出现错误error，一般可以直接在error返回的错误信息里面找原因。
如果对错误信息不明确，也可以借助开发者工具看看请求地址是否正确，请求参数是否有异常，服务器是否有响应，返回状态和数据是否正常等方面找原因。

SpringSecurity解决跨域问题，在SpringBoot整合SprinSecurity中如何用前后端分离Ajax登录，Ajax登录返回状态200还是近error

先说说SpringSecurity如何实现前后端分离Ajax登录?

　　今天使用SpringBoot整合SpringSecurity中想使用Ajax替代SpringSecurit的Form表单提交，在这里我们的提交方式还是使用表单提交

http.formLogin().loginProcessingUrl("/authentication/form")

loginProcessingUrl方法表示你登录请求的地址，在这里SpringSecurity默认登录页面地址是/login ,填写了username与password 上送的地址就是loginProcessingUrl方法指定的地址，
如果你想使用Ajax登录+Token验证，或者是移动端不得不这样做的时候，那么你就不用管SpringSecurity的默认登录地址啦，只需要注意 在Ajax请求的时候 登录名必须是username字段
密码必须是 password字段 登录提交的地址就是loginProcessingUrl方法指定的路径/authentication/form
因为在SpringSecurity中处理账号密码登录的过滤器是UsernamePasswordAuthenticationFilter 而这个登录处理类里面写死了这两个字段的名称，如下图源码中所见：

public class UsernamePasswordAuthenticationFilter extends
        AbstractAuthenticationProcessingFilter {
    // ~ Static fields/initializers
    // =====================================================================================

    public static final String SPRING_SECURITY_FORM_USERNAME_KEY = "username";
    public static final String SPRING_SECURITY_FORM_PASSWORD_KEY = "password";

我测试的前端登录代码如下：

$.ajax({
        url:"http://127.0.0.1/authentication/form",
        timeout : 20000,
        type:"post",
        dataType:"json",
        data:{
            username:"088358",password:"123"
        },
        success:function(data){
              alert(\'ok\')
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("1 异步调用返回失败,XMLHttpResponse.readyState:"+XMLHttpRequest.readyState);
            alert("2 异步调用返回失败,XMLHttpResponse.status:"+XMLHttpRequest.status);
            alert("3 异步调用返回失败,textStatus:"+textStatus);
            alert("4 异步调用返回失败,errorThrown:"+errorThrown);
        }
    })

后端在执行登录成功之后处理代码

后端在执行登录成功之后会回调AuthenticationSuccessHandler拦截器的onAuthenticationSuccess方法，我们只需要写一个类集成AuthenticationSuccessHandler就可以重写这个方法来生成token返回给前端了，Token如何生成，请看上一章jwtToken的使用 https://www.cnblogs.com/langjunnan/p/12464791.html ，这章不细说

@Component
public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
            Authentication authentication) throws IOException, ServletException {
        // 登录成功之后
        List<Object> functs = (List<Object>) authentication.getAuthorities();// 当前功能列表
        String loginName = authentication.getName();// 登录名
        Users obj = (Users) authentication.getPrincipal();// 用户信息
        String token = JwtUtil.createToken(loginName, functs, obj);// 生成token
        response.setHeader(JwtUtil.TOKEN_HEADER, JwtUtil.TOKEN_PREFIX + token);
        response.setContentType("application/json;charset=utf-8");
        response.setStatus(HttpServletResponse.SC_OK);
        PrintWriter pw = response.getWriter();
        DTO dto = new DTO<>();
        dto.setCode("000000");
        dto.setMessage("认证通过");
        String json=JsonUtil.set(dto);
        System.out.println(json);
        pw.println(json); // println 等于pw.flush()+pw.close();
    
    }
}

代码是没有问题的，但是由于跨域的问题Ajax是调用不成功的，

SpringSecurity中的跨域问题

之前写项目都是自己定义一个过滤器来解决跨域问题，但是这次过滤器不好用了，只能把跨域资源配置到SpringSecurity中了

代码如下

http.cors().configurationSource(CorsConfigurationSource())//允许跨域访问

/*跨域原*/
    private CorsConfigurationSource CorsConfigurationSource() {
        CorsConfigurationSource source =   new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");    //同源配置，*表示任何请求都视为同源，若需指定ip和端口可以改为如“localhost：8080”，多个以“，”分隔；
        corsConfiguration.addAllowedHeader("*");//header，允许哪些header，本案中使用的是token，此处可将*替换为token；
        corsConfiguration.addAllowedMethod("*");    //允许的请求方法，PSOT、GET等
        ((UrlBasedCorsConfigurationSource) source).registerCorsConfiguration("/**",corsConfiguration); //配置允许跨域访问的url
        return source;
    }