js ajax跨域調用

正常使用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);
    }

}