跨域访问的几种方式

1.使用jsonp实现跨域

前台

注意：dataType必须是jsonp

$.ajax({
    url: "http://localhost:8083/user/user/checkUsername",
    async:false,
    dataType:'jsonp',    //跨域json请求一定是jsonp
    data: {
        "username":username
    },
    success: function (result) {
        console.log(JSON.stringify(result));
        alert(JSON.stringify(result))
    },
    error:function(jqXHR,textStatus,errorThrown){
        alert(jqXHR.status)
        alert("服务器异常-----"+jqXHR.readyState)
    }
});

后台：返回格式为callback（）（括号内为json格式）

    @ApiOperation(value = "验证用户名")
    @GetMapping("checkUsername")
    public void checkUsername(HttpServletResponse response, String username,
    @RequestParam("callback")String callback)throws Exception{
        boolean result = false;
        User user = userService.findUserByUsername(username);
        if (null != user){
            result = true;
        }
        Map responseMap = new HashMap<>();
        responseMap.put("valid", result);
        ObjectMapper objectMapper = new ObjectMapper();
        String responseString = objectMapper.writeValueAsString(responseMap);
        response.getWriter().write(callback+"("+responseString+")");
    }

2.设置response头信息

response.addHeader("Access-Control-Allow-Origin", "*");

前端

$.ajax({
    url: "http://localhost:8083/user/user/checkUsername",
    async:false,
    dataType:'json',    //此处为json即可
    data: {
        "username":username
    },
    success: function (result) {
        console.log(JSON.stringify(result));
        alert(JSON.stringify(result))
    },
    error:function(jqXHR,textStatus,errorThrown){
        alert(jqXHR.status)
        alert("服务器异常-----"+jqXHR.readyState)
    }
});

后台：加上response.addHeader("Access-Control-Allow-Origin", "*");

    @ApiOperation(value = "验证用户名")
    @GetMapping("checkUsername")
    public String checkUsername(HttpServletResponse response, String username)throws Exception{
        response.addHeader("Access-Control-Allow-Origin", "*");
        boolean result = false;
        User user = userService.findUserByUsername(username);
        if (null != user){
            result = true;
        }
        Map responseMap = new HashMap<>();
        responseMap.put("valid", result);
        ObjectMapper objectMapper = new ObjectMapper();
        String responseString = objectMapper.writeValueAsString(responseMap);
        return responseString;
    }

3.使用springboot中的注解@CrossOrigin

注意：该注解可以加在类上，也可以加在方法上

前台：与2是相同的，dataType直接设置为json

后台：

    @ApiOperation(value = "验证用户名")
    @CrossOrigin
    @GetMapping("checkUsername")
    public String checkUsername(HttpServletResponse response, String username)throws Exception{
        boolean result = false;
        User user = userService.findUserByUsername(username);
        if (null != user){
            result = true;
        }
        Map responseMap = new HashMap<>();
        responseMap.put("valid", result);
        ObjectMapper objectMapper = new ObjectMapper();
        String responseString = objectMapper.writeValueAsString(responseMap);
        return responseString;
    }