2019-04-11

[vue]使用axios跨域和session失效的问题处理

axios的坑还是很多的，传参成功之后，发现每次请求服务器的session是不一样的，网上查了说是要让每次请求都携带cookie，也就是认证信息。

请求端JS代码

import axios from 'axios';
axios.defaults.withCredentials = true; //意思是携带cookie信息,保持每次请求session的一致性 //请求的代码，根据自己实际情况填写
 var params=new URLSearchParams()//这里是post传输数据，以form data形式传输而不是requite rayload
params.append('phoneCode',phoneCode);
params.append('phone',phone);
if(this.phoneCode.length>5){
    axios({
        method: 'post',
        url: this.apiurl+"member_phone.php",
        data:params
    }).then((response)=> {
        return response.data;
    }).catch((error)=> {
        return "网络错误，请稍后重试";
    })
}

后端服务器

设置允许请求域：Access-Control-Allow-Origin:xxx.com

设置客户端携带证书式访问设置：Access-Control-Allow-Credentials:true

注意：这里的Access-Control-Allow-Origin:一定要填写准确域名，不能填写*

以PHP为例子

header('Access-Control-Allow-Origin:http://localhost:8080');
header('Access-Control-Allow-Credentials:true');

这样配置完就可以实现跨域请求并且携带cookies，保持每次请求session的一致性

下一篇：简单说说export import require
上一篇：[vue]使用axios作http请求 post传参问题解决[真是一个坑]