SpringBoot跨域問題的解決方法實例

Posted on by

談到跨域問題，首先我們要認識一下瀏覽器的同源策略

百度百科對同源策略的解釋

當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面

當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，

即檢查是否同源，隻有和百度同源的腳本才會被執行。 [1]

如果非同源，那麼在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。

同源策略是瀏覽器的行為，是為瞭保護本地數據不被JavaScript代碼獲取回來的數據污染，因此攔截的是客戶端發出的請求回來的數據接收，即請求發送瞭，服務器響應瞭，但是無法被瀏覽器接收。

其實就是，客戶端瀏覽器請求url去獲取資源，也就是請求服務器的ip地址加上端口號（http://主機名:端口號），如果服務器所在的Ip地址（http://主機名:端口號）並不一致，這就屬於不同源，就產生一個跨域的問題，瀏覽器會禁止服務端返回數據

解決方法有兩種

  • 前端制造不符合規則的請求規則
  • 後端進行跨域支持（告訴前端別管這些規則瞭，按我的來）

跨域問題

跨域問題是指下面一些地方不同（至少一處）

  • 請求協議不同
  • ip地址不同
  • 端口號不同
  • 請求方式不同

SpringBoot解決跨域問題

/**
 * @Author: Ember
 * @Date: 2021/4/26 22:16
 * @Description:
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
     @Override
    public void addCorsMappings (CorsRegistry registry) {
        String[] allowOrigins ={"http://localhost:8080/","https://www.quyo.fun/"};
        //允許所有形式的跨域請求
        registry.addMapping ("/**")
                .allowedOriginPatterns ("*")
                .allowCredentials (true)
                .allowedMethods ("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .maxAge (3600);
    }


    private CorsConfiguration buildConfig () {
        CorsConfiguration corsConfiguration = new CorsConfiguration ();
        List<String> list = new ArrayList<>();
        list.add ("*");
        corsConfiguration.setAllowedOrigins (list);
        corsConfiguration.addAllowedOrigin ("*");
        corsConfiguration.addAllowedHeader ("*");
        corsConfiguration.addAllowedMethod ("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter () {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource ();
        source.registerCorsConfiguration ("/**", buildConfig ());
        return new CorsFilter (source);
    }

    @Bean
    public HttpMessageConverter<String> responseBodyConverter() {
        StringHttpMessageConverter converter = new StringHttpMessageConverter(
                Charset.forName("UTF-8"));
        return converter;
    }

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        converters.add(responseBodyConverter());
    }
}

測試

下面是一個前端AJAX小測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link type="test/css" href="css/style.css" rel="external nofollow"  rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(function(){
	$("#cors").click(
		function(){
			$.ajax({
				headers:{"token":"","Content-Type":"application/json;charset=UTF-8","Access-Control-Allow-Origin":"*"},
				url:"http://47.119.112.252/book/index/show/allBlogs",
				success:function(data){
					console.log("start")
					console.log(data)
					alert(data);
				}
			})
		});
	});
</script>
<body>
	<input type="button" id="cors" value="core跨域測試"
</body>
</html>

跨域問題解決。

總結

到此這篇關於SpringBoot跨域問題解決的文章就介紹到這瞭,更多相關SpringBoot跨域問題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：