做小程序的時(shí)候,有個(gè)別的接口,需要提供給小程序服務(wù)以外的推廣頁(yè)使用,推廣頁(yè)域名與小程序后端服務(wù)接口域名產(chǎn)生了跨域問(wèn)題,查了部分資料后,有兩種解決方案。
首先說(shuō)一下跨域問(wèn)題的原因:
?
跨域是指:瀏覽器A從服務(wù)器B獲取的靜態(tài)資源,包括Html、Css、Js,然后在Js中通過(guò)Ajax訪問(wèn)C服務(wù)器的靜態(tài)資源或請(qǐng)求。即:瀏覽器A從B服務(wù)器拿的資源,資源中想訪問(wèn)服務(wù)器C的資源。
同源策略是指:瀏覽器A從服務(wù)器B獲取的靜態(tài)資源,包括Html、Css、Js,為了用戶安全,瀏覽器加了限制,其中的Js通過(guò)Ajax只能訪問(wèn)B服務(wù)器的靜態(tài)資源或請(qǐng)求。即:瀏覽器A從哪拿的資源,那資源中就只能訪問(wèn)哪。
同源是指:同一個(gè)請(qǐng)求協(xié)議(如:Http或Https)、同一個(gè)Ip、同一個(gè)端口,3個(gè)全部相同,即為同源。
解決方案有很多,本文只記錄cors的方案。
SpringBoot2.x配置Cors
SpringBoot2.x主要提供了兩種方式來(lái)支持Cors,如下:
| 方式? ? ? ? |作用范圍| 說(shuō)明? |
|:-------:|:-------------:|:-----:|
| @CrossOrigin? |一個(gè)Controller中全部接口或是其中一個(gè)特定的接口| 配置、定制特定的請(qǐng)求接口 |
|WebMvcConfigurer對(duì)象| 全部接口 |適用于全局配置|
第一種: 使用@CrossOrigin注解
代碼實(shí)例
@RestController
@RequestMapping(value = "/api")
@CrossOrigin
public class UsersController{
? ? @Autowired
? ? private UsersService usersService;
? ? @PostMapping("userInfo/{openid}")
? ? @CrossOrigin
? ? public User getUserInfo(@PathVariable String openid) {
? ? ? ? return userService.get(openid);
? ? }
}
其中,@CrossOrigin注解可以使用以下參數(shù)
| 名稱(chēng) |類(lèi)型| 范圍? |?必填 |請(qǐng)求頭字段 |
|:-------:|:-------------:|:-----:|:-----:|:-----:|
|? value? |String數(shù)組 |類(lèi)或方法|是|Access-Control-Allow-Origin|
|? origins? |String數(shù)組?|類(lèi)或方法|是,同value,可以二選一|Access-Control-Allow-Origin|
|? methods? |String數(shù)組?|類(lèi)或接口|是|Access-Control-Allow-Methods|
|? maxAge? | long | 類(lèi)或接口 | 否 | Access-Control-Max-Age |
|?allowCredentials? |String | 類(lèi)或接口 | 否 | Access-Control-Allow-Credentials |
|?allowedHeaders? | String數(shù)組?| 類(lèi)或接口 | 否 | Access-Control-Request-Headers?|
|? exposedHeaders? | String數(shù)組? | 類(lèi)或接口 | 否 | Access-Control-Expose-Headers |
備注說(shuō)明
value、origins屬性:配置允許訪問(wèn)的源,如: http://anxminise.cc,*表示允許全部的域名
methods屬性:配置跨域請(qǐng)求支持的方式,如:GET、POST,且一次性返回全部支持的方式
maxAge屬性:配置預(yù)檢請(qǐng)求的有效時(shí)間, 單位是秒,表示:在多長(zhǎng)時(shí)間內(nèi),不需要發(fā)出第二次預(yù)檢請(qǐng)求
allowCredentials屬性:配置是否允許發(fā)送Cookie,用于 憑證請(qǐng)求, 默認(rèn)不發(fā)送cookie
allowedHeaders屬性:配置允許的自定義請(qǐng)求頭,用于 預(yù)檢請(qǐng)求
exposedHeaders屬性:配置響應(yīng)的頭信息, 在其中可以設(shè)置其他的頭信息,不進(jìn)行配置時(shí), 默認(rèn)可以獲取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段
第二種: 使用WebMvcConfigurer對(duì)象
代碼實(shí)例
@Configuration
public class MyConfiguration {
? ? @Bean
? ? public WebMvcConfigurer corsConfigurer() {
? ? ? ? return new WebMvcConfigurer() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ? ? ? ? ? registry.addMapping("/api/**")
? ? ? ? ? ? ? ? ? ? ? ? ? .allowedOrigins("*")?
? ? ? ? ? ? ? ? ? ? ? ? ? .allowCredentials(true)
? ? ? ? ? ? ? ? ? ? ? ? ? .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
? ? ? ? ? ? ? ? ? ? ? ? ? .maxAge(3600);?
? ? ? ? ? ? }
? ? ? ? };
? ? }
}
其中,通過(guò)相應(yīng)的方法實(shí)現(xiàn)跨域請(qǐng)求的配置
|?方法類(lèi)?|方法名稱(chēng)|?必填? |?請(qǐng)求頭字段 |說(shuō)明?|
|:-------:|:-------------:|:-----:|:-----:|:-----:|
|?CorsRegistry? |addMapping?| 是 |? 無(wú), 非Cors屬性, 屬于SpringBoot配置 |配置支持跨域的路徑|
|?CorsRegistration? |allowedOrigins?| 是 | Access-Control-Allow-Origin |配置允許的源|
|?CorsRegistration? | allowedMethods?| 是 |Access-Control-Allow-Methods|?配置支持跨域請(qǐng)求的方法, 如:GET、POST,一次性返回|
|?CorsRegistration? |?maxAge?|?否 | Access-Control-Max-Age |?配置預(yù)檢請(qǐng)求的有效時(shí)間?|
|?CorsRegistration? |allowCredentials |?否 | Access-Control-Allow-Credentials |?配置是否允許發(fā)送Cookie, 用于 憑證請(qǐng)求?|
|?CorsRegistration? | allowedHeaders?|?否 | Access-Control-Request-Headers |?配置允許的自定義請(qǐng)求頭, 用于 預(yù)檢請(qǐng)求?|
|?CorsRegistration? | exposedHeaders? | 否 | Access-Control-Expose-Headers |?配置響應(yīng)的頭信息, 在其中可以設(shè)置其他的頭信息 |