快捷導(dǎo)航

SpringBoot跨域問題的解決方法實(shí)例

更新時(shí)間：2021年05月02日 10:43:25 作者：GDUT_Ember

這篇文章主要給大家介紹了關(guān)于SpringBoot跨域問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

談到跨域問題，首先我們要認(rèn)識(shí)一下瀏覽器的同源策略

百度百科對(duì)同源策略的解釋

當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁中分別打開來百度和谷歌的頁面

當(dāng)瀏覽器的百度tab頁執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁面的，

即檢查是否同源，只有和百度同源的腳本才會(huì)被執(zhí)行。 [1]

如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問。

同源策略是瀏覽器的行為，是為了保護(hù)本地?cái)?shù)據(jù)不被JavaScript代碼獲取回來的數(shù)據(jù)污染，因此攔截的是客戶端發(fā)出的請(qǐng)求回來的數(shù)據(jù)接收，即請(qǐng)求發(fā)送了，服務(wù)器響應(yīng)了，但是無法被瀏覽器接收。

其實(shí)就是，客戶端瀏覽器請(qǐng)求url去獲取資源，也就是請(qǐng)求服務(wù)器的ip地址加上端口號(hào)（http://主機(jī)名:端口號(hào)），如果服務(wù)器所在的Ip地址（http://主機(jī)名:端口號(hào)）并不一致，這就屬于不同源，就產(chǎn)生一個(gè)跨域的問題，瀏覽器會(huì)禁止服務(wù)端返回?cái)?shù)據(jù)

解決方法有兩種

前端制造不符合規(guī)則的請(qǐng)求規(guī)則
后端進(jìn)行跨域支持（告訴前端別管這些規(guī)則了，按我的來）

跨域問題

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

請(qǐng)求協(xié)議不同
ip地址不同
端口號(hào)不同
請(qǐng)求方式不同

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/"};
        //允許所有形式的跨域請(qǐng)求
        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());
    }
}

測(cè)試

下面是一個(gè)前端AJAX小測(cè)試

<!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跨域測(cè)試"
</body>
</html>