Springboot跨域 ajax jsonp请求

Posted 2022-03-08 jqka

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"

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