这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

使用Spring Boot + Vue 做前后端分离项目搭建，实现登录时，出现跨域请求

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); }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。