前端跨域问题总结

使用vue-resource做请求，跨域问题作法如下：

用vuecli2.0脚手架，具体配置如下：

// 地址映射表，可以通过设置将复杂的url简化，还可以解决跨域问题

    proxyTable: {

      '/api':{

        target:"https://xx.com/",

        changeOrigin:true,

        pathRewrite:{

          '/api':''

        }

      }

    }

 

再具体页面做调用：

  this.$http.get('api' + 'xx/xx/definition/listJson').then(function (res) {

        if (res.status === 200) {

          _self.processList = res.data.rows

        }

      })

jquery跨域问题处理：

  $.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true}});

 

$.ajax({
    type: 'POST',
    url: base + "xx/xx/login",
    data: pack(data),
    contentType: 'application/json',
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    success: function (data) {

    },
    error: function () {

    }
})

 

后台部分：

private boolean recharge(HttpServletRequest request, HttpServletResponse response) throws Exception {
    String url = request.getHeader("Origin");
    logger.debug("Access-Control-Allow-Origin:" + url);
    if (!StringUtils.isEmpty(url)) {
        String val = response.getHeader("Access-Control-Allow-Origin");
        if (StringUtils.isEmpty(val)) {
            response.addHeader("Access-Control-Allow-Origin", url);
            response.addHeader("Access-Control-Allow-Credentials", "true");
        }
    }
    return true;
}

 

后续持续更新总结。。。。。