iview axios 跨域配置问题

发布于 2022-09-06 08:16:26 字数 42 浏览 13 评论 0

在iview-cli中怎么解决,配置axios跨域问题,请说的的详细点

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

·深蓝 2022-09-13 08:16:26

跨域需要后端的知识,在后端处理,现在只说后端:
(代码前面的也是代码组件部门)
一:写过滤器:
/**

  • desc 自定义跨域过滤器
  • className CorsFilter
  • modify
  • version 1.0
  • since 1.8

*/
public class CorsFilter implements Filter {

private FilterConfig config = null;

@Override
public void init(FilterConfig config) throws ServletException {
    this.config = config;
}

@Override
public void destroy() {
    this.config = null;
}


@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) servletResponse;
    HttpServletRequest request = (HttpServletRequest) servletRequest;
    // 允许哪些Origin发起跨域请求,nginx下正常
    // response.setHeader( "Access-Control-Allow-Origin", config.getInitParameter( "AccessControlAllowOrigin" ) );
    response.setHeader( "Access-Control-Allow-Origin", "http://192.168.212.127:8070" );
    // 允许请求的方法
    response.setHeader( "Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT" );
    // 多少秒内,不需要再发送预检验请求,可以缓存该结果
    response.setHeader( "Access-Control-Max-Age", "3600" );
    // 表明它允许跨域请求包含xxx头
    response.setHeader( "Access-Control-Allow-Headers", "Origin, Access-Token,X-Requested-With, Content-Type, Accept" );
    //是否允许浏览器携带用户身份信息(cookie)
    response.setHeader( "Access-Control-Allow-Credentials", "true" );

   // response.setHeader( "Access-Control-Expose-Headers", "*" );
    if (request.getMethod().equals( "OPTIONS" )) {
        response.setStatus( 200 );
        return;
    }
    filterChain.doFilter( servletRequest, response );
}

}

注意:http://192.168.212.127:8070,这个就是前面访问的地址

第二步:在web.xml中配置过滤器

<!-- CORS跨域过滤器 start -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>bd.store.base.cotroller.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<!--# CORS跨域过滤器 end -->

第三步:前面直接使用,不需要做任何配置

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文