美文网首页
记录一下前端设置 axios.defaults.withCred

记录一下前端设置 axios.defaults.withCred

作者: CodeYang | 来源:发表于2022-01-21 16:09 被阅读0次

记录一下前端设置 axios.defaults.withCredentials = true 的报错

请求报错:
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

解决方式1:只能解决一个接口

在后端controller请求的方法中设置

  1. Access-Control-Allow-Origin 值对应前端地址,localhost和127.0.0.1是不一样的,注意看你的是什么


    image.png
  2. Access-Control-Allow-Credentials 设置为 true

即可解决

    @RequestMapping(value = "/getFileList")
    public List<FileVO> getFileList(HttpServletResponse response){
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        //User user = (User) SecurityUtils.getSubject().getPrincipal();//user.getId()
        List<FileVO> fileVOList = fileDao.findFileListByParentId(1, 0);
        return fileVOList;
    }

解决方式2:全局配置

@Component
@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest reqs = (HttpServletRequest) req;
        String curOrigin = reqs.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {}

}
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).maxAge(3600);
    }
}

相关文章

  • 记录一下前端设置 axios.defaults.withCred

    记录一下前端设置 axios.defaults.withCredentials = true 的报错 请求报错:A...

  • DOM样式相关

    记录自己学习前端的过程,内容仅供参考 样式设置 单个设置操作 ->node(节点名).style.样式名 = "样...

  • html使用exceljs 导出excel

    记录一下前端html使用excel 导出excel 学习的demo

  • 前端导航

    推荐一下自己的前端导航网站,记录了各种关于前端的网址感兴趣的赶紧收藏一下吧前端导航-ZDZN 开发框架: Vue....

  • HTML-JavaScript动态添加元素appendChild

    开始自学一下前端的基础知识,这里记录一下知识点,毕竟不熟,不记录很容易就忘记了。前端最佳的学习资料就是在MDN,没...

  • 富文本属性

    记录一下 最近用来设置UITextField 的attributedPlaceholder ,顺便mark 一下吧...

  • vscode插件开发实践

    初次尝试了一下vscode插件开发,写了一个前端工具箱作为日常方便使用,记录一下 在vscode插件里面搜索:前端...

  • Git命令行实用手册

    记录一下git常用操作 设置user的name和email 设置name: $ git config --glob...

  • Meta标签中各属性的含义

    前言:最近学习前端,看到head里面设置了好多属性,在此记录下。学习于 博客 1.viewport 一、含义 手机...

  • iOS/Android与前端Vue的交互

    这阵子移动端两个端都和前端做了交互 记录一下 前端调用iOS/Android(以目前前端最流行的框架Vue为例 )...

网友评论

      本文标题:记录一下前端设置 axios.defaults.withCred

      本文链接:https://www.haomeiwen.com/subject/fjrjhrtx.html