vue关于axios请求跨域,session丢失的问题

起因:http是无状态的,因此我们通常需要用到cookie以及session来保存状态,session是在服务器端存储的,会和cookie一起使用,设置了session之后,会发送给浏览器一个cookie,这个cookie是session_id,当再次请求的时候浏览器会将它发送给服务器,以此来找到对应的session. 

但是,我们实际使用的时候通常会用到跨域,就是向不同的域发起请求,但是默认情况下此时cookie是不会发送给服务器的,此时就导致了丢失session_id,从而导致了session的值为undefined。解决方案如下: 

首先,前端main.js页面设置withCredentials为true,使请求头可以携带cookie:

axios.defaults.withCredentials = true

这里后台语言是node.js

app.all('*', function(req, res, next) {

    res.header("Access-Control-Allow-Origin", "这里填可以跨域访问的域,不能填*哦");

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

    res.header("X-Powered-By",' 3.2.1');

    res.header("Access-Control-Allow-Credentials",true);

    res.header("Content-Type", "application/json;charset=utf-8");

    next();

});

php同理

   header('Content-Type: text/html;charset=utf-8');

    header('Access-Control-Allow-Origin:*'); // 这里填可以跨域访问的域,不能填*哦

    header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型

    header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies

    header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-                  Requested-with, Origin'); // 设置允许自定义请求头的字段

而且Access-Control-Allow-Origin不能设为星号,必须指定明确的,与请求网页一致的域名。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容