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+"})";
}

第二種，啟動類里配置，類似於zuul網關配置，見參考二：

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);
    }
}

第三種，在類前面配置：@CrossOgigin(origins="*",maxAge=3600)

@RestController
@RequestMapping("index")
@CrossOrigin(origins="*",maxAge=3600)
public class TestOne{
　　@RequestMapping("/test")
　　public Map test(String id){
   　　 /*
    　　 *執行serviceImpl
    　　 */    
   　　  return Map;
　　}
}

 

參考一：https://segmentfault.com/a/1190000012469713

參考二：https://blog.csdn.net/m0_37556444/article/details/82832054