關於Cors跨域的問題，前端有代理和jsonp的常用方式解決這種非同源的訪問拒絕策略，什麼是同源？即域名一致端口一致但是端口下訪問的接口api不同的兩種或者幾種的互相訪問叫做同源訪問，但是若是接口不一致或者域名不一致（這裡泛指IP不一致），那麼對應的就屬於非同源訪問，瀏覽器會拒絕發出請求，直接回复404，有時候我也見過恢復202的就是發出去了但是被後端的Mvc處理hander鏈給拒絕了。那麼配置MVC就是後端處理Cors問題的解決思路。
之前學習過MVC的處理鏈路，從一次請求發過來到回覆資料總共11次處理：
##請求傳送到伺服器端時是由我們的MVC進行處理的，而統一調配任務流程的則是我們的請求分發器，注意這裡請求到處理器之後回去尋找處理器適配器（符合校驗處理的請求才能被允許例如接口含有的合法api ，以及跨域原則），之前我們的微信小程式開發過程中是沒有考慮跨域問題的，原因是我們知道小程式的請求處理都是由微信後台進行分發處理的，也就是在微信的後台時就做了前端的跨域處理，大概是採用動態代理的方式解決了小程式的跨域。
那麼我們先看看MVC的配置介面WebMvcConfigurer 的源代碼：
public interface WebMvcConfigurer {
default void configurePathMatch(PathMatchConfigurer configurer) {
}
default void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
}
default void configureAsyncSupport(AsyncSupportConfigurer configurer) {
}
default void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
}
default void addFormatters(FormatterRegistry registry) {
}
default void addInterceptors(InterceptorRegistry registry) {
}
default void addResourceHandlers(ResourceHandlerRegistry registry) {
}
default void addCorsMappings(CorsRegistry registry) {
}
default void addViewControllers(ViewControllerRegistry registry) {
}
default void configureViewResolvers(ViewResolverRegistry registry) {
}
default void addArgumentResolvers(List<HandlerMethodArgumentResolver> resolvers) {
}
default void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> handlers) {
}
default void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
}
default void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
}
default void configureHandlerExceptionResolvers(List<HandlerExceptionResolver> resolvers) {
}
default void extendHandlerExceptionResolvers(List<HandlerExceptionResolver> resolvers) {
}
@Nullable
default Validator getValidator() {
return null;
}
@Nullable
default MessageCodesResolver getMessageCodesResolver() {
return null;
}
}登入後複製
它的內部是具備一些處理器解析器以及映射的添加與配置的方法的，那麼我們要解決Cros跨域問題就是要考慮addCorsMappings 配置Cros映射，所以我們點進去看看這註冊Cros的CorsRegistry 的源碼：
public class CorsRegistry {
private final List<CorsRegistration> registrations = new ArrayList();
public CorsRegistry() {
}
public CorsRegistration addMapping(String pathPattern) {
CorsRegistration registration = new CorsRegistration(pathPattern);
this.registrations.add(registration);
return registration;
}
protected Map<String, CorsConfiguration> getCorsConfigurations() {
Map<String, CorsConfiguration> configs = CollectionUtils.newLinkedHashMap(this.registrations.size());
Iterator var2 = this.registrations.iterator();
while(var2.hasNext()) {
CorsRegistration registration = (CorsRegistration)var2.next();
configs.put(registration.getPathPattern(), registration.getCorsConfiguration());
}
return configs;
}
}登入後複製
從上述程式碼不難發現，內部有一個不可改變的CorsRegistration 數組鍊錶，以及增加映射的方法，主要還是看看它具備的元素CorsRegistration 含有什麼配置項：
public class CorsRegistration {
private final String pathPattern;
private CorsConfiguration config;
public CorsRegistration(String pathPattern) {
this.pathPattern = pathPattern;
this.config = (new CorsConfiguration()).applyPermitDefaultValues();
}
public CorsRegistration allowedOrigins(String... origins) {
this.config.setAllowedOrigins(Arrays.asList(origins));
return this;
}
public CorsRegistration allowedOriginPatterns(String... patterns) {
this.config.setAllowedOriginPatterns(Arrays.asList(patterns));
return this;
}
public CorsRegistration allowedMethods(String... methods) {
this.config.setAllowedMethods(Arrays.asList(methods));
return this;
}
public CorsRegistration allowedHeaders(String... headers) {
this.config.setAllowedHeaders(Arrays.asList(headers));
return this;
}
public CorsRegistration exposedHeaders(String... headers) {
this.config.setExposedHeaders(Arrays.asList(headers));
return this;
}
public CorsRegistration allowCredentials(boolean allowCredentials) {
this.config.setAllowCredentials(allowCredentials);
return this;
}
public CorsRegistration maxAge(long maxAge) {
this.config.setMaxAge(maxAge);
return this;
}
public CorsRegistration combine(CorsConfiguration other) {
this.config = this.config.combine(other);
return this;
}
protected String getPathPattern() {
return this.pathPattern;
}
protected CorsConfiguration getCorsConfiguration() {
return this.config;
}
}登入後複製
我們可以發現內部是具備允許放行：請求頭，請求路徑，請求方法，請求源策略的方法的，所以我們在這裡的重寫addCorsMappings方法配置一個CorsRegistry 添加相應的路徑方法與請求策略放行不就可以解決跨域的問題了？
我們寫一個WebMvcConfig配置類別實作剛剛研究的WebMvcConfigurer介面重寫addCrosMappings設定CrosRegistry即可（或是在api與Controller控制類別上打上@CrossOrigin註解也可以解決問題（註解預設放行所有來源的請求））：
/**
* 配置前端跨域访问请求
*/
@Configuration
public class WbMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("Content-Type","X-Request-With","Access-Control-Request-Method","Access-Control-Request-Headers","token")
.allowedMethods("*")
.allowedOriginPatterns("*")
/*注意当这个配置为真是我们不能将允许源设置为*而是将源路径设置为*即可*/
.allowCredentials(true);
}
@Bean
public FormContentFilter httpPutFormContentFilter(){
return new FormContentFilter();
}
}登入後複製
我們利用axios寫一個簡單的請求發送按鈕：
<input type="button" value="get" class="get">
<script>
document.querySelector(".get").onclick = function () {
// 跨域一般是是后端解决的事情
axios.get("http://127.0.0.1:8080/all").then(
function (response) {
console.log(response)
}
)
}
</script>登入後複製
再用SpringBoot寫一個簡單的controller的api：
@RestController
public class testController {
@Autowired
private ProductServiceImpl productService;
@GetMapping("/all")
@ResponseBody
public List<Product> all() {
Page<Product> page = productService.page(1L);
List<Product> productList = new LinkedList<>();
productList.add(page.getRecords().iterator().next());
return productList;
}
}登入後複製
這裡我們在瀏覽器開啟5050埠下的這個html檔案就可以點選按鈕存取介面了：
這裡可以看到請求存取資料成功了！
以上是Springboot怎麼透過設定WebMvcConfig處理Cors非同源存取跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
