解决跨域访问导致session_id不一致的问题

一、问题

前后端分离项目,使用了session保存用户的信息,用户登录成功后,用同一个token去获取用户信息时,出现了提示该用户未登录的错误。

 

二、原因

前端使用ajax请求,涉及到跨域问题,导致了同一个用户的请求的session_id不一致,所以出现上述问题,日志捕获到的session_id信息如下:

服务端设置的允许跨域访问代码如下【PHP】:

header('Access-Control-Allow-Origin: *'); // 允许所有来源访问
header("Access-Control-Allow-Methods: *"); // 允许所有的请求方式
header('Access-Control-Allow-Headers: *'); // 允许携带任意的请求头
header('Access-Control-Allow-Credentials: true'); // 允许客户端携带验证信息,例如 cookie 之类的

 

以上设置其实是存在冲突的。

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段,另一方面,开发者必须在AJAX请求中打开withCredentials属性,需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名

这里可以参考阮一峰老师的文章:跨域资源共享 CORS 详解【尤其需要注意的是简单请求和复杂请求的理解】

三、解决

服务端设置的允许跨域访问代码如下【PHP、TP3.2】:

//允许跨域
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '"' . get_client_ip() . '"';
header('Access-Control-Allow-Origin:'.$origin); // 动态设置允许来源
header("Access-Control-Allow-Methods: *");
header('Access-Control-Allow-Headers: Content-Type,Accept-Charset');
header('Access-Control-Allow-Credentials: true');

前端请求设置withCredentials属性,比如【vue.js】:

axios.defaults.withCredentials = true;

问题解决,日志捕获到的session_id信息如下:

四、参考链接

1、http://www.ruanyifeng.com/blog/2016/04/cors.html

2、https://segmentfault.com/a/1190000006095018

3、https://www.cnblogs.com/caimuqing/p/6733405.html

4、https://www.cnblogs.com/jpfss/p/9081570.html

posted @ 2020-02-15 18:38  Blogs-whx  阅读(2895)  评论(0编辑  收藏  举报