No 'Access-control-Allow-Origin' header is present on the requested resource 跨域问题

  在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

上一篇:【Java123】解决PKIX path building failed / unable to find valid certification path to requested target


下一篇:java 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. O