Vue+Spring boot框架跨域问题解决方案

1、跨域问题描述

如下图所示，为前端整合axios后向后端Spring boot项目接口发送请求时报错内容：

2、解决方案

可以通过在后端Spring Boot项目中添加配置类来解决，所采用的方案对应的代码内容如下，

package com.example.demo01.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
     
    @Override
    public void addCorsMappings(CorsRegistry registry){
     
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

3、解决之后

再次通过axios发起数据请求，完美通过。