使用vue+axios+spring boot前后端分离项目时会出现跨域问题

解决方式:

一: 全局配置

/** * 就是注册的过程，注册Cors协议的内容。 * 如： Cors协议支持哪些请求URL，支持哪些请求类型，请求时处理的超时时长是什么等。 */ @Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping("/**")// 所有的当前站点的请求地址，都支持跨域访问。 .allowedMethods("GET", "POST", "PUT", "DELETE") // 当前站点支持的跨域请求类型是什么。 .allowCredentials(true) // 是否支持跨域用户凭证 .allowedOrigins("*") // 所有的外部域都可跨域访问。 如果是localhost则很难配置，因为在跨域请求的时候，外部域的解析可能是localhost、127.0.0.1、主机名 .maxAge(60); // 超时时长设置为1小时。 时间单位是秒。 }

二: 针对单个接口,使用注解@CrossOrigin

/** * @desc * @author guozhongyao * @date 2020/03/22 17:05 */ @RestController @RequestMapping("/user") @RequiredArgsConstructor @CrossOrigin(origins = "*",maxAge = 3600) public class UserController { final UserMapper userMapper; @GetMapping("/getOne/{id}") public User getOne(@PathVariable("id") Integer id) { return userMapper.getById(id); } }

三: 自定义跨域过滤器

1,编写过滤器

/** * @desc 跨域过滤器 * @author guozhongyao * @date 2020/3/30 15:54 */class CrosFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; //*号表示对所有请求都允许跨域访问 res.addHeader("Access-Control-Allow-Origin", "*"); res.addHeader("Access-Control-Allow-Methods", "*"); chain.doFilter(request, response); }}

2, 注册过滤器

/** * @desc 注册自定义跨域过滤器 * @author guozhongyao * @date 2020/3/30 15:52 */ @Bean public FilterRegistrationBean registerFilter(){ FilterRegistrationBean bean = new FilterRegistrationBean(); bean.addUrlPatterns("/*"); bean.setFilter(new CrosFilter()); return bean; }

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