vue-element-template+SpringBoot如何实现跨域

1以vue-element-template框架为依托,实现跨域,mock相关数据已经删除,已经不报跨域的错误,但是前端访问不了后端接口
2.我在前端框架中已经修改了这些东西

img

img

img

img


现在跨域解决,但是访问后端接口访问不到

该回答引用ChatGPT4与博主@晓码自在合作编写:

从你描述的情况来看,有几个可能的原因:

  1. CORS配置问题。你后端需要配置CORS,允许前端的跨域请求。Spring Boot可以很容易配置CORS,在Spring配置类中添加:
java
@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:8080")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*");
            }
        };
    }
}

  1. 前端请求路径问题。前端请求路径需要符合代理配置的规则,比如你配置的代理是 "/api" 开头的请求代理到后端,那么前端请求的路径也需要是 "/api" 开头的。
  2. 后端接口路径问题。后端接口路径也需要以 "/api" 开头,对应前端的代理规则。
  3. 其他问题。如果以上三点都确认没有问题,那可能是你本地的运行环境导致的其他问题,可以尝试在不同环境下运行来定位问题所在。

后端 controller类加 @CrossOrigin 注解