Vue 前后端分离跨域

因为前后端属于不同的域,导致每次ajax请求服务器都会当做新的用户访问,导致session丢失

解决方法

后端

后端设置允许跨域，下面示例为 flask

@app.after_request
def af_request(resp):
    """
     #请求钩子，在所有的请求发生后执行，加入headers。
    :param resp:
    :return:
    """
    resp = make_response(resp)
    resp.headers['Access-Control-Allow-Origin'] = 'http://10.172.88.11:8081'  // 当 Access-Control-Allow-Credentials 为 true 时，这个值不允许为 *
    resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    resp.headers['Access-Control-Allow-Credentials'] = 'true'
    return resp

Vue

改前端ajax请求，下面三个选一个即可

// 使用vue.resource发送请求时配置如下：
// main.js中
Vue.http.options.xhr = { withCredentials: true };

// 使用vue.axios发送请求时配置如下：
axios.defaults.withCredentials = true;

// jquery请求带上 xhrFields: {withCredentials: true}, crossDomain: true；
$.ajax({
  type: "post",
  url: "",
  xhrFields: {withCredentials: true},
  crossDomain: true,
  data: {username:$("#username").val()},
  dataType: "json",
  success: function(data){ }
});

注意

对于后端系统，尽量所有的请求都返回给 vue 进行处理，避免使用 302 跳转，因为 vue 捕捉不到302跳转的过程