Vue+SpringBoot跨域问题出现类似于Access to XMLHttpRequest at 'http://localhost:8081/的错误

最新推荐文章于 2024-11-09 21:11:49 发布

原创最新推荐文章于 2024-11-09 21:11:49 发布 · 3.4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#springboot #vue

收录于

本文详细介绍了如何解决前端与后端之间的CORS跨域问题，提供了两种解决方案：一是在后端进行配置，二是在前端配置修改。重点讲解了后端的局部配置和全局配置方法，包括使用Spring框架的WebMvcConfigurer接口实现跨域请求。

出现的错误如下： Access to XMLHttpRequest at 'http://localhost:8081/test from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 首先有两种解决方式， 1.一种是在后端进行配置 2.一种是在前端配置修改（点击查看）这里介绍后端的局部配置和全局配置 //跨域问题的处理，全局处理方式 @Configuration public class MyWebCrossOrgin implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry){ registry.addMapping("/*/**") .allowedHeaders("*") .allowedMethods("*") .maxAge(1800) .allowedOrigins("http://localhost:8080"); } }

//局部处理方式

//在相对应的方法前添加如下注解

@CrossOrigin(value = "http://localhost:8080",maxAge = 1800,allowedHeaders = "*")

//具体使用

    @RequestMapping("/test")
//    @CrossOrigin(value = "http://localhost:8080",maxAge = 1800,allowedHeaders = "*")
    public Map<String,String> getdata(String name, String age){
        return  userService.getdata(name,age);
    }