快捷導(dǎo)航

SpringBoot解決跨域請(qǐng)求攔截問題代碼實(shí)例

更新時(shí)間：2019年06月21日 09:58:07 作者：冬眠的山谷

這篇文章主要介紹了SpringBoot解決跨域請(qǐng)求攔截代碼實(shí)例，在微服務(wù)開發(fā)中,一個(gè)系統(tǒng)包含多個(gè)微服務(wù),會(huì)存在跨域請(qǐng)求的場景。本文講解SpringBoot解決跨域請(qǐng)求攔截的問題。,需要的朋友可以參考下

前言

同源策略：判斷是否是同源的，主要看這三點(diǎn),協(xié)議，ip，端口。

同源策略就是瀏覽器出于網(wǎng)站安全性的考慮，限制不同源之間的資源相互訪問的一種政策。

比如在域名https://www.baidu.com下，腳本不能夠訪問https://www.sina.com源下的資源，否則將會(huì)被瀏覽器攔截。

注意兩點(diǎn)：

1.必須是腳本請(qǐng)求，比如AJAX請(qǐng)求。

但是如下情況不會(huì)產(chǎn)生跨域攔截

<img src="xxx"/>
<a href='xxx"> </a>

2.跨域攔截是前端請(qǐng)求已經(jīng)發(fā)出，并且在后端返回響應(yīng)時(shí)檢查相關(guān)參數(shù)，是否允許接收后端請(qǐng)求。

在微服務(wù)開發(fā)中，一個(gè)系統(tǒng)包含多個(gè)微服務(wù)，會(huì)存在跨域請(qǐng)求的場景。

本文主要講解SpringBoot解決跨域請(qǐng)求攔截的問題。

搭建項(xiàng)目

這里創(chuàng)建兩個(gè)web項(xiàng)目，web1 和 web2.

web2項(xiàng)目請(qǐng)求web1項(xiàng)目的資源。

這里只貼關(guān)鍵代碼，完整代碼參考GitHub

WEB2

創(chuàng)建一個(gè)Controller返回html頁面

@Slf4j
@Controller
public class HomeController {
@RequestMapping("/index")
public String home(){
log.info("/index");
return "/home";
}
}

html頁面 home.html

這里創(chuàng)建了一個(gè)按鈕，按鈕按下則請(qǐng)求資源：http://localhost:8301/hello

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web2</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function () {
$("#testBtn").click(function () {
console.log("testbtn ...");
$.get("http://localhost:8301/hello",function(data,status){
alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);
});
})
})
</script>
</head>
<body>
web2
<button id="testBtn">測試</button>
</body>
</html>

WEB1

@Slf4j
@RestController
public class Web1Controller {
@RequestMapping("/hello")
public String hello(){
log.info("hello ");
return "hello," + new Date().toString();
}
}

這里配置兩個(gè)項(xiàng)目為不同的端口。

WEB1為8301

WEB2為8302

因此是不同源的。

測試

在web1還沒有配置允許跨域訪問的情況下

按下按鈕，將會(huì)出現(xiàn)錯(cuò)誤。顯示Header中沒有Access-Control-Allow-Origin

Access to XMLHttpRequest at 'http://localhost:8301/hello' from origin 'http://localhost:8300' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

WEB1添加允許跨域請(qǐng)求，通過實(shí)現(xiàn)WebMvcConfigurer

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/hello");
}
}

再次訪問將會(huì)返回正常數(shù)據(jù)。

除了以上的配置外，還可以做更細(xì)致的限制

比如對(duì)請(qǐng)求的headers，請(qǐng)求的方法POST/GET...。請(qǐng)求的源進(jìn)行限制。

同時(shí)還可以使用注解 @CrossOrigin來替換上面的配置。

@Slf4j
@RestController
public class Web1Controller {
@CrossOrigin
@RequestMapping("/hello")
public String hello(){
log.info("hello ");
return "hello," + new Date().toString();
}
}

注解可以用在類上，也可以用在方法上，但必須是控制器類

配置和上面一樣，也是可以對(duì)方法，header,源進(jìn)行個(gè)性化限制。

@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
/** @deprecated */
@Deprecated
String[] DEFAULT_ORIGINS = new String[]{"*"};
/** @deprecated */
@Deprecated
String[] DEFAULT_ALLOWED_HEADERS = new String[]{"*"};
/** @deprecated */
@Deprecated
boolean DEFAULT_ALLOW_CREDENTIALS = false;
/** @deprecated */
@Deprecated
long DEFAULT_MAX_AGE = 1800L;
@AliasFor("origins")
String[] value() default {};
@AliasFor("value")
String[] origins() default {};
String[] allowedHeaders() default {};
String[] exposedHeaders() default {};
RequestMethod[] methods() default {};
String allowCredentials() default "";
long maxAge() default -1L;
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: