springboot跨域的三种方式

本文深入探讨了三种跨域处理方法:CORS、JSONP及nginx配置。详细解析了CORS在Spring Boot中的实现,包括配置允许跨域的路径、域名、方法及时间。同时介绍了JSONP的工作原理及在前后端的具体应用,以及nginx跨域配置的基本概念。
摘要由CSDN通过智能技术生成

转发自: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进行跨域操作

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值