SpringBoot和Vue中跨域請求的原理是什么

這期內(nèi)容當中小編將會給大家?guī)碛嘘PSpringBoot和Vue中跨域請求的原理是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

使用Spring Boot + Vue 做前后端分離項目搭建，實現(xiàn)登錄時，出現(xiàn)跨域請求

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

Vue中使用的Axios，配置main.js文件

Axios.defaults.baseURL = 'http://localhost:80'Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'Axios.defaults.withCredentials = true

Spring Boot中重寫WebMvcConfigurationSupport的方法addCorsMapping

import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;@Configurationpublic class WebMvcConfig extends WebMvcConfigurationSupport{  @Override  public void addCorsMappings(CorsRegistry registry) {    String[] origins = {"http://localhost:8080"};    registry.addMapping("/**")        .allowedOrigins(origins)        .allowCredentials(true)        .allowedMethods("*")        .allowedHeaders("*")        .maxAge(3600);  }}

上述就是小編為大家分享的SpringBoot和Vue中跨域請求的原理是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業(yè)資訊頻道。