zoukankan      html  css  js  c++  java
  • 跨域问题处理(已处理IOS兼容问题 )

    问题描述: vue项目使用axios 请求 在 安卓和pc端正常请求 但是在ios(ios12是我们遇到的)上会出现 跨域 预请求失败 导致 在catch会捕获 Network error ;

    导致问题出现的原因: 是由于header里面带了很多请求参数,而后端设置的response.setHeader("Access-Control-Allow-Headers", "*");允许所有头部没有生效导致。 但是在PC浏览器或者安卓手机上,该方式又能生效(烦人的IOS兼容问题,找了好久才找到)。最终通过后台修改跨域配置解决ios请求兼容请问题;

    改造前:

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "*");
     
        if (HttpMethod.OPTIONS.toString().equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
        } else {
            filterChain.doFilter(request, response);
        }
    }

    找到问题后,开始对上面的代码进行了改造,由于项目中不同地方的接口可能header中的某些参数不一致,所以决定采用前端传了什么header,就在response中设置允许什么header,改造后的代码如下。

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        
        /**cors modified start**/
        StringBuilder headers = new StringBuilder();
        Enumeration<String> headerNames = request.getHeaders("Access-Control-Request-Headers");
        if(Objects.nonNull(headerNames)) {
            while (headerNames.hasMoreElements()) {
                headers.append(headerNames.nextElement()).append(",");
            }
        }
        response.setHeader("Access-Control-Allow-Headers", headers.toString());
        /**cors modified end**/
        
        
        if (HttpMethod.OPTIONS.toString().equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
        } else {
            filterChain.doFilter(request, response);
        }
    }

     解决问题参考地址:

      1: https://github.com/axios/axios/issues/1598

      2: https://blog.csdn.net/biakia0610/article/details/103777597

      3: https://blog.csdn.net/Daijianshi_123/article/details/102853654

  • 相关阅读:
    mysql 分库分表
    深度学习(四)转--入门深度学习的一些开源代码
    深度学习(三)转-可视化理解卷积神经网络 直接查看卷积神经网络的过程特征
    深度学习(二)神经网络中的卷积和反卷积原理
    深度学习(一)神经网络中的池化与反池化原理
    转-------基于R-CNN的物体检测
    vs2013下c++调用python脚本函数 出现的一些问题总结
    关于mfc作为上位机接收硬件端USB或串口数据显示成图片 解决串口接收数据丢字节丢包问题
    转-------CNN图像相似度匹配 2-channel network
    深度学习(五)基于tensorflow实现简单卷积神经网络Lenet5
  • 原文地址:https://www.cnblogs.com/lst619247/p/15107431.html
Copyright © 2011-2022 走看看