正常使用ajax调用java.com
$.ajax({ type: 'get', url: 'http://www.java.com/custinfo?id=888',
dataType: 'json',
success: function(data){
console.log('成功');
}
});
你会发现无法调用
原因:
JavaScript出于安全方面的考虑,不允许跨域调用其他项目。
跨域,由于浏览器同源策略的限制,a.com 无法调用 b.com
解决方案: JSONP
JQuery调用jsonp
var url = 'http://www.java.com/custinfo?id=888&jsoncallback=?';
$.getJSON(url,function(data){
console.log('成功');
});
注意:如果java.com返回的是JSON格式的数据,你是取不到的。
你会发现回调函数并没有调用
json格式示例:
{ "code":"200", "msg":"成功" , "data":[ { "custNo":"100088" "id":"888" } ] }
如果服务端返回的是上面JSON格式的数据你是取不到的。
需要服务端修改代码,返回JSONP格式的数据。
jsonp格式示例:
jsonpcallback( { "code":"200", "msg":"成功" , "data":[ { "custNo":"100088" "id":"888" } ] } )
看到两种格式的区别了吗?
-----------------------------------------------------------------------------
JSONP 只可以发送 GET 请求,无法发送其他类型的请求,
推荐在后端通过 (CORS,Cross-origin resource sharing) 来解决跨域问题。
传统的SSM 框架通过在 XML 文件中配置 CORS 来解决跨域问题 ,
Spring Boot通过实现WebMvcConfigurer接口然后重写addCorsMappings方法解决跨域问题
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); } }
----------------------------------------------------------------------------------
Spring Boot项目前后端分离部署需要解决跨域问题。
cookie存放用户登录信息,在spring拦截器进行权限控制,当权限不符合时,直接返回给用户固定的json结果。
当用户登录以后,正常使用;当用户退出登录状态时或者token过期时,由于拦截器和跨域的顺序有问题,出现了跨域的现象。
http请求,先走filter,到达servlet后才进行拦截器的处理,把cors放在filter里,就可以优先于权限拦截器执行。
@Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration); return new CorsFilter(urlBasedCorsConfigurationSource); } }