标签

跨域

字数

492 字

阅读时间

3 分钟

一、概述

二、前端实现

2.1 Jsonp

• ajax 不能进行跨域请求(如果 ajax 请求的控制器返回的就是字 符串六或 json 数据,不能访问)
• 发现可以在一个项目直接访问另一个项目的 js 文件.(标签引 用还是通过 ajax 访问)
• 使用 ajax 访问另一个项目的控制器,但是控制器返回的结果伪 装成 js 文件.

使用 jsonp 时服务器端返回的数据格式:函数名(返回的数据);

代码

$(function(){ 
    $("button").click(function(){
        $.ajax({ 
            url:'http://localhost:9002/demo2', 
            type:'post', 
            // dataType: 一定要设置 jsonp 
            dataType:'jsonp', 
            // jsonCallback: 参数名对应的值,表示最终回调的函数名.省略的默认值 jquery:一堆数字 
            // 如果单独编写了一个 function,必须要求 jsonpCallback 和 function 的名称相同 
            jsonpCallback:'ab12312321c',
            // jsonp: 传递给服务器的参数名.省略的默认 callback 
            jsonp:'callback', 
            // 如果直接使用 success:function()对 jsonpCallback 值没有要求. 
            success:function(data){ 
                alert(data+"success"); 
            } 
        }); 
    }) 
})

// 服务端
//使用 spring 对 jackson 封装类 MappingJacksonValue
@ResponseBody 
public MappingJacksonValue demo(String callback){ 
    People p = new People(); 
    p.setId(1); 
    p.setName("张三");
    //把构造方法参数转换为 json 字符串并当作最终返回值函数的参数
    MappingJacksonValue mjv = new MappingJacksonValue(p); 
    //最终返回结果中函数名 mjv.setJsonpFunction(callback); 
    return mjv; 
}

二、后端实现

2.1 添加跨域配置

/**
* 跨域配置
* 只要是带自定义header的跨域请求，在发送真实请求前都会先发送OPTIONS请求，浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。
*/
@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    // 设置访问源地址
    config.addAllowedOrigin("*");
    // 设置访问源请求头
    config.addAllowedHeader("*");
    // 设置访问源请求方法
    config.addAllowedMethod("*");
    // 对接口配置跨域设置
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}