后端配置文件：
@Configuration
public class WebAppConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOrigins("*")
// 是否允许证书
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD", "PATCH")
// 设置允许的header属性
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
}
跨域报错：我的接口中用到的参数是HttpServletRequest对象，这个对象容易获得，所以不存参数问题，所以后端接口是可以直接访问的，但是在这个接口中我用HttpServletRequest对象在获取Cookie时出现了问题，因为在前端setCookie没有成功，导致这里一直没有获取到cookie，数据返回一直为null，而访问其他接口时又用到这个数据，导致其他接口出现如上Access-Control-Allow-Origin错误。
解决办法：在过滤器中添加以下方法便可以成功解决，注意Access-Control-Allow-Origin不要设置为*，设置为*有可能还是会提示跨域
@Component
public class AuthFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp;
response.addHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
response.addHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
那么使用GET方法确实是不跨域了，但是在使用POST提交数据的时候，发现前端又提示跨域，实际上现在就简单了，前端有一个组件QS，前端在发送请求的时候 使用qs包装一下请求参数；
axios.post("/api", qs.stringify({
name: "ALin",
id: "666"
})).then(res => {
})
参考文档：写了Access-Control-Allow-Origin，还报跨域错误解决过程 | 码农家园
已解决：axios get请求不跨域，post请求跨域了_阿林阿林的博客-CSDN博客_get不跨域 但post跨域
