鍍金池/ 問答/Java  HTML/ iview axios 跨域配置問題

iview axios 跨域配置問題

在iview-cli中怎么解決,配置axios跨域問題,請說的的詳細(xì)點(diǎn)

回答
編輯回答
寫榮

跨域需要后端的知識,在后端處理,現(xiàn)在只說后端:
(代碼前面的也是代碼組件部門)
一:寫過濾器:
/**

  • 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發(fā)起跨域請求,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" );
    // 多少秒內(nèi),不需要再發(fā)送預(yù)檢驗(yàn)請求,可以緩存該結(jié)果
    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 -->

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

2018年3月2日 20:48
編輯回答
枕邊人

跨域需要后端進(jìn)行處理,把域名設(shè)置為白名單,可以看下這個axios get和post的完整案例及亂碼解決方案http://www.aazzp.com/2017/11/...

2017年8月1日 18:04