主要介绍了springboot+vue前后端分离实现请求api跨域问题

在Spring Boot和Vue前后端分离的项目中，当前端Vue通过ajax或axios请求后端的API时，会经常遇到跨域问题。

跨域是由于同源策略（Same Origin Policy）导致的，即浏览器限制了在不同源之间进行通信（不同源指协议、域名、端口号任意一个不同）。解决跨域问题的方法有很多，这里介绍一种常见的处理方式。

在Spring Boot后端配置中，我们可以通过添加一个跨域配置类来实现对请求跨域的处理。首先创建一个类，命名为CorsConfig（跨域配置类名可自定义），并在该类上加上@Configuration注解。然后在类中添加一个方法addCorsMappings，使用@CrossOrigin注解配置允许跨域的规则。例如可以设置允许所有来源（origin）、所有方法（methods）和所有请求头部（allowedHeaders），如下所示：

@Configuration
public class CorsConfig {

@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
};
}
}

这样就实现了对所有请求的跨域访问授权。在allowedOrigins方法中可配置指定的允许来源，如指定某个特定的域名；allowedMethods方法可配置允许的请求方法，如GET、POST等；allowedHeaders方法可配置允许携带的请求头信息。

在Vue前端项目中，可以在开发环境中通过配置代理实现请求转发来解决跨域问题。在vue.config.js（Vue的配置文件）中，添加以下代码：

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端API地址
ws: true,
changeOrigin: true
}
}
}
}

以上代码表示将以/api开头的请求转发到http://localhost:8080地址，并开启WebSocket和改变请求的源地址。这样前端项目就可以通过/api访问后端API，而不用担心跨域问题。

这样，我们就能够很方便地解决Spring Boot和Vue前后端分离项目中的请求API跨域问题。