zoukankan      html  css  js  c++  java
  • Springboot跨域 ajax jsonp请求

    SpringBoot配置:

    <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    @SuppressWarnings("deprecation")
    @Configuration
    public class CorsFilter extends WebMvcConfigurerAdapter {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedHeaders()
                    // 允许使用的请求方法,以逗号隔开
                    .allowedMethods("*")
                    // 表示接受任意域名请求
                    .allowedOrigins("*")
                    // 表示是否允许发送Cookie。默认情况下Cookie不包括在CORS请求中。当设为true时表示服务器明确许可,Cookie可以包含在请求中一起发送给服务器。
                    .allowCredentials(true)
                    // 缓存此次请求的秒数。在这个时间范围内,所有同类型的请求都将不再发送预检请求而是直接使用此次返回的头作为判断依据,非常有用,大幅优化请求次数
                    .maxAge(3600);
        }
    }
    @SpringBootApplication
    @ComponentScan
    public class CorsDemoApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(CorsDemoApplication.class, args);
        }
    
    }
    @Controller
    @RequestMapping("/cors")
    public class CorsController {
    
        @RequestMapping(value="/index")
        @ResponseBody
        public String corsTest(HttpServletRequest request,String name,String age) {
            String jsonpCallback = request.getParameter("callback");
            Map<String, Object> map=new HashMap<>();
            map.put("name",name);
            map.put("age",age);
            map.put("date",new Date());
            return jsonpCallback + "(" + JSON.toJSONString(map) + ")";
        } 
    }

    Ajax请求:

              $.ajax({
                                url:"http://62.234.65.61:8090/cors/index",
                                type:"POST",
                                data:{
                                     "name":"amdin",
                                     "age":20
                                },
                                dataType:"jsonp",
                                /* jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                                jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 */
                                success: function(data){
                                     console.log("res:"+JSON.stringify(data));
                                },
                                error: function(){
                                     alert('fail');
                                }
                            });

    总结:

    测试1:前台+后台本地运行,IP相同端口不同   测试结果:res:{"date":1560913652938,"name":"amdin","age":"20"}

    测试2:前段本地运行,后台放到腾讯云服务器,测试结果:res:{"date":1560913652938,"name":"amdin","age":"20"}

    都能完成跨域请求及成功获取返回值

    作者:往霄龙
    求其上者得其中,求其中者得其下
  • 相关阅读:
    mongdb
    网络编程
    分布式锁与事务
    mongodb
    Angular4
    思考
    kafka
    Spark总结
    你不知道的javaScript笔记(1)
    vue2.0 配置 选项 属性 方法 事件 ——速查
  • 原文地址:https://www.cnblogs.com/JQKA/p/11050245.html
Copyright © 2011-2022 走看看