后端配置文件:
@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 => {
})