springboot跨域的三种方式

转发自:https://blog.csdn.net/b376924098/article/details/79709075

一、第一种方式 cors

实现了WebMvcConfigurer的类中重写
@Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                .allowedOrigins("*")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);

    }

可能会遇到跨域乱码问题，这里我提供两种网上的常用方式

1、@RequestMapping(name = "/test" ,produces="text/plain;charset=UTF-8")

2、实现configureMessageConverters方法(同上)

 @Bean
    public HttpMessageConverter<String> httpMessageConverter(){
        HttpMessageConverter httpMessageConverter=new StringHttpMessageConverter(Charset.forName("UTF-8"));
        return httpMessageConverter;
    }

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        converters.add(httpMessageConverter());
    }

第二种方式:jsonp(仅支持get请求,如果RequestMapping没有加,method = RequestMethod.POST的话，ajax使用post也能访问)

//jsonp 处理函数(可有可无)
function crossback(data){
    console.log("进入回调函数!!!!"+data.name)
}

//ajax请求方式
$("#cross").click(function(){
   $.ajax({
         type:"get",
         //data:{"ipAddress":"192.168.0.109"},
         dataType:"jsonp",
         jsonp:"callback",//默认写法
         jsonpCallback:"crossback",//前台是什么后台就是什么作为前缀,如果上面写了对应函数就会先执行对应函数 在执行success函数
         contentType:"application/json",
         url:"http://localhost:8010/test",
         async:true,
         timeout:3000,
         success:function(data){
            console.log(data.name);
         }
     });
 });

服务端代码

 @RequestMapping(name = "/test")
    //,produces="text/plain;charset=UTF-8"
    @ResponseBody
    public String test(String ipAddress) {
        System.out.println("进入跨域测试方法:访问IP地址:   "+ipAddress);
        //这里的crossback对应的是前端的jsonpCallback的值
        //({"+"\"name\":"+"\"测试跨域\""+"})"这一段是json格式的值，我是自己拼接的，大家可以使用工具,注意前面一定要加前缀
        return "crossback({"+"\"name\":"+"\"测试跨域\""+"})";
    }

效果图(jsonp)

三、nginx跨域，这个东西只是说一下，作者也没有去试过，自己可以百度一下，在项目不在自己服务器上的情况下可以使用此方法完成跨域，具体操作自行百度！

 

jsonp:服务器需要返回固定的拼接js，只能get方式使用，不支持post，优点就是对浏览器兼容性比较好

cors：这个的不需要改变前端代码就可以实现跨域，而jsonp需要前后端修改代码，缺点：不支持ie10以下的浏览器，支持所有http请求

nginx：当资源不处于自己的服务器上才能使用，因为前面两种方式都需要修改服务端的代码，他人项目中的代码我们是无法修改的此时就可以选择nginx进行跨域操作