1、前端报错
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.
- Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Access-Control-Allow-Origin设置为* 那么Access-Control-Allow-Credentials需要设置为false,可后端设置,也可以在前端把axios里的
withCredentials: false, // //是否支持cookie跨域 ,这一条设置为false就行了
对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为*。这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为*,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http:xxx.com,则请求将成功执行
- Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
token 未加到Access-Control-Allow-Headers中
2、后端代码
@Component
@WebFilter(urlPatterns = { "/*" }, filterName = "headerFilter")//这里的“/*” 表示的是需要拦截的请求路径
public class CorsFilter implements Filter {
private static final Logger log = LoggerFactory.getLogger(CorsFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
log.info("跨域过滤器启动");
}
@Override
public void doFilter(ServletRequest request, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
log.info("跨域过滤器工作");
HttpServletResponse response = (HttpServletResponse) servletResponse;
//解决跨域访问报错
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization,token,Content-Length,Content-MD5,Expect,Host");
response.setHeader("Access-Control-Allow-Origin", "*");//CredentialsCredentials为true此处需具体域名
response.setHeader("Access-Control-Allow-Credentials", "false");//此处设置为false ccess-Control-Allow-Origin才能设置为*
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE");
//设置过期时间
//response.setHeader("Access-Control-Max-Age", "3600");
// 编码
//response.setCharacterEncoding("UTF-8");
chain.doFilter(request, servletResponse);
}
@Override
public void destroy() {
log.info("跨域过滤器销毁");
}
}
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}