欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

spring boot 前后端分离跨域

程序员文章站 2022-06-13 16:03:52
...

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);  
    }  

}