在IDEA中有一套微服务,然后在webStorm中写前端代码,前端使用ajax访问Controller:
function getDate(){ var id=$("#id").val(); $.ajax({ type:"post", dataType:"json", url:"http://localhost:8081/index/test", data:{"id":id}, success:function (data){ alert(data.time); }, error:function (data){ alert(JSON.stringify(data)); } }) }
后端Controller会返回一个Map,执行没有问题,但是ajax一直执行error,F12发现出错: No 'Access-control-Allow-Origin' header is present on the requested resource。
查询后,发现是因为跨域了,跨域访问违反了同源策略!
同源:域名,协议,端口相同。
同源策略:浏览器的ajax只能访问跟它的html页面相同域名或IP的资源。
同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
前端的IP是localhost:63343,后端IP是localhost:8081,这样导致ajax能访问后端(只是简单的调用),但是不能获得其返回值!
第一种方法,还是没能接受,第二种方法成功了。
解决方法:
第一种:
使用ajax 的jsonp:
修改前端ajax:
function getDate(){ var id=$("#id").val(); $.ajax({ type:"post", dataType:"jsonp", jsonp:"callback", contentType:"application/jsonp;charset=utf-8", url:"http://localhost:8081/index/test", data:{"id":id}, success:function (data){
var data1=data["dataOne"]; alert(data1.time); }, error:function (data){ alert(JSON.stringify(data)); } }) }
修改后端Controller方法:
public String test(String id, String callback){ /* *执行serviceImpl */ return callback+"({dataOne:"+map+"})"; }
第二种,启动类里配置:
public static void main(String[] args) { SpringApplication.run(DemoUaaApplication.class, args); } @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); final CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); // 允许cookies跨域 config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI,*表示全部允许,在SpringMVC中,如果设成*,会自动转成当前请求头中的Origin config.addAllowedHeader("*");// 允许访问的头信息,*表示全部 config.setMaxAge(18000L);// 预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了 config.addAllowedMethod("*");// 允许提交请求的方法,*表示全部允许 config.addAllowedMethod("HEAD"); config.addAllowedMethod("GET");// 允许Get的请求方法 config.addAllowedMethod("PUT"); config.addAllowedMethod("POST"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }
参考一:https://segmentfault.com/a/1190000012469713
参考二:https://blog.csdn.net/m0_37556444/article/details/82832054