前后端分离遇见跨域问题

#前后端分离遇见跨域问题

错误截图

在这里插入图片描述

前端代码

Login.vue
在这里插入图片描述
axios
在这里插入图片描述
在这里插入图片描述

后端代码

在这里插入图片描述
使用了@CrossOrigin注解但是没有形成作用
报错原因:
Access to XMLHttpRequest at 'http://localhost:66/admin/login' from origin 'http://localhost:8088' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

换注解@CrossOrigin(origins = “*”,maxAge = 3600)

@Component
public class CorsFilter extends OncePerRequestFilter {

@Override
protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
    httpServletResponse.addHeader("Access-Control-Allow-Origin", "*");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type");
    httpServletResponse.addHeader("Access-Control-Max-Age", "1800");//30 min
    filterChain.doFilter(httpServletRequest, httpServletResponse);
}

}