vue axios无法发送session
 
后端在与前端交互时请求带入session vue前端不能返回session
 
后发现是vue中axiox中限制了session的返回，需要在create中加入解开注释
 
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
 
后端我用的是node node需要在config.default.js中的cors中加修改origin为前端地址【不能为*】credentials：true
 

  config.cors = {
    origin: 'http://localhost:9528',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
    credentials:true
};

 
VUE+php跨域session问题
 
VUE+php跨域session问题
cookie
跨域请求中 cookie
php跨域session
 

 
VUE+php跨域session问题
 
闲来无事，公司又处于下滑期，于是就自学了vue.js,但是作为初学者，遇到很多问题，这里要感谢我的Big Brother @Dires.t帮助我许多，因此解决了问题，好了言归正传！
 
cookie
 
首先必须明确一点，存储cookie是浏览器提供的功能。cookie 其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的cookie。
 
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。
 
存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。
 
但在 localStorage 出现之前，cookie被滥用当做了存储工具。什么数据都放在cookie中，即使这些数据只在页面中使用而不需要随请求传送到服务端。当然cookie标准还是做了一些限制的：每个域名下的cookie 的大小最大为4KB，每个域名下的cookie数量最多为20个（但很多浏览器厂商在具体实现时支持大于20个）。
 
跨域请求中 cookie
 
默认情况下，在发生跨域时，cookie 作为一种凭据信息是不会被传送到服务端的。必须要进行额外设置才可以，这里给大家推荐一篇关于阮一峰的跨域资源共享 CORS 详解
 
php跨域session
 
session被用于表示一个持续的连接状态，在网站访问中一般指代客户端浏览器的进程从开启到结束的过程。session其实就是网站分析的访问（visits）度量，表示一个访问的过程。
 
session的常见实现形式是会话cookie（session cookie），即未设置过期时间的cookie，这个cookie的默认生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。实现机制是当用户发起一个请求的时候，服务器会检查该请求中是否包含sessionid，如果未包含，则系统会创造一个名为JSESSIONID的输出 cookie返回给浏览器(只放入内存，并不存在硬盘中)，并将其以HashTable的形式写到服务器的内存里面；当已经包含sessionid是，服务端会检查找到与该session相匹配的信息，如果存在则直接使用该sessionid，若不存在则重新生成新的 session。这里需要注意的是session始终是有服务端创建的，并非浏览器自己生成的。　但是浏览器的cookie被禁止后session就需要用get方法的URL重写的机制或使用POST方法提交隐藏表单的形式来实现。
 
当发生跨域请求使用session是，浏览器不会加上cookie,从而使服务器无法读取该cookie下对应的session；那么我们的PHP页面就需要加上：
 
header('Access-Control-Allow-Origin:http://127.0.0.1:8080');//表示接受http://127.0.0.1:8080的请求
header('Access-Control-Allow-Credentials:true');//表示是否允许发送Cookie
 
另一方面，开发者必须在AJAX请求中打开withCredentials属性
 
//jquery写法
$.ajax({
     data:param,
     url:url,
     type:"get",
     dataType: 'json',
     xhrFields:{
         withCredentials:true
     },
     success:function(res){
     	_this.spans = res;
     }
 })   
//axios写法
axios.post('http://101.132.138.141:8888/service/pageUsers', objectToForm({
        'currentPage': '1',
        'pageSize': '10',
        'token': '7e987daa-6c84-46d2-be26-f345dfaed8a7',
    }), {
        withCredentials: true
    })
    .then(function(res) {
    
    })
    .catch(function(err) {
    
    });
 
完结。。。。。
 
最后附上一些参考资料：
 1、你真的会使用XMLHttpRequest吗？
 2、跨域资源共享 CORS 详解

一、Vue中使用 vue-session
 
1.npm 安装  vue-session
 
npm install vue-session
 
2.在main.js中引入
 
import VueSession from 'vue-session'
Vue.use(VueSession)
 
3.使用
 
 this.$session.set("key",value); //存session
 this.$session.get("key"); //获取session
 
二、Vue中使用vue-cookies
 
1.npm  安装 vue-cookies
 
npm install vue-cookies --save
 
2.在main.js中引入
 
import VueCookies from 'vue-cookies'
Vue.use(VueCookies);
 
3.使用
 
 this.$cookies.set("key",value); //存cookies
 this.$cookies.get("key"); //获取cookies
 
4.注意：如果想在cookies和session中存入的是对象是，需要先转换为json字符串
 
 
 
来源：https://www.npmjs.com/package/vue-cookies
 
           https://www.npmjs.com/package/vue-session