前后分離調用API跨域

前后分離調用API接口跨域問題

 

什么是跨域？

 

　　 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

 

廣義的跨域：

1. 資源跳轉：A鏈接、重定向、表單提交。
2. 資源嵌入： <link>、<script>、<img>、<frame>等dom標簽，還有樣式中background:url()、@font-face()等文件外鏈。
3. 腳本請求： js發起的ajax請求、dom和js對象的跨域操作等。

 

　　其實我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

 

什么是同源策略？

　　同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名。

　　

同源策略限制以下幾種行為：

1. Cookie、LocalStorage 和 IndexDB 無法讀取。
2. DOM 和 Js對象無法獲得。
3. AJAX 請求不能發送。

 

跨域場景：

　　

url	說明	是否允許通信
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js	同一域名，不同文件或路徑	允許
http://www.domain.com:8000/a.js http://www.domain.com/b.js	同一域名，不同端口	不允許
http://www.domain.com/a.js https://www.domain.com/b.js	同一域名，不同協議	不允許
http://www.domain.com/a.js http://192.168.4.12/b.js	域名和域名對應相同ip	不允許
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js	主域相同，子域不同	不允許
http://www.domain1.com/a.js http://www.domain2.com/a.js	不同域名	不允許

　　

 

解決方式：（這里只介紹一種最簡單的方式）

 

 

跨域資源共享（CORS）

　　SpringBoot新增WebMvcConfiguration類

 

package com.yhzy.zytx.common.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @ClassName WebMvcConfiguration
 * @Description 跨域請求處理
 * @Author 天生傲骨、怎能屈服
 * @Date 2019/5/31 16:19
 * @Version 1.0
 */
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允許請求帶有驗證信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允許訪問的客戶端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允許服務端訪問的客戶端請求頭*/
        corsConfiguration.addAllowedHeader("*");
        /*允許訪問的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

 

 

 

　　

　　注：類上要加@Configuration注解

 

　　這樣就OK了，超簡單，感謝各位大佬閱讀，不喜勿噴！！！