小编给大家分享一下表达解决ajax跨域访问会话失效问题的方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<强>前言强>
最近在学习表达,就用以前做的项目来进行表达前的后端分离的练手了,在做登陆注册的时候发现跨域的时候,会话的值是会失效的,导致会话里面的数据获取为定义,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法。
<强>解决方法强>
1,客户端因为会话原则上是需要饼干支持的,所以ajax方法里面必须添加xhrFields: {withCredentials:真},表示允许带饼干的跨域ajax请求(特别说明,只要使用的会话都得加这句)
,美元(& # 39;#登录# 39;).click (function (), { . ajax({美元才能 ,,,url: & # 39; http://localhost: 3000/用户/yzm& # 39;//服务端路由地址 ,,,类型:& # 39;得到# 39; ,,xhrFields: {withCredentials:真}, ,,,数据类型:& # 39;json # 39; ,才能成功:功能(数据){ ,,,$ (& # 39;# yzm_img& # 39;) . html(数据) ,,}, ,,错误:函数(){ ,,,警报(& # 39;错误# 39;); ,,} ,,}); ,}); ,$ (& # 39;# form_login& # 39;)。submit (function (e),{/! *登录* !/e.preventDefault才能();/! *阻止表单默认事件,页面全局刷新* !/var 才能;数据=https://www.yisu.com/zixun/$ (' # form_login ') .serialize();/! *将表单里的数据包装起来* !/. ajax({美元 url: http://localhost: 3000/用户登录, 类型:“文章”, 数据:数据, xhrFields: {withCredentials:真}, 数据类型:json, 成功:函数(味精){ 警报(“这是返回的数据”+味精); }, 错误:函数(err) { 警报(“这是失败的信息”+错); } }); });
通过设置withCredentials:真的,发送Ajax时,请求报头中便会带上饼干信息。
2,服务器端修改程序。js文件
相应的,对于客户端的参数,服务器端也需要进行设置。
对应客户端的xhrFields。withCredentials:真参数,服务器端通过在响应头中设置Access-Control-Allow-Credentials=true来运行客户端携带证书式访问。通过对凭证参数的设置,就可以保持跨域Ajax时的饼干。
var express =,要求(& # 39;表达# 39;); var session =,要求(& # 39;express-session& # 39;);/*引入会话变量*/var app =,表达(); app.all(& # 39; * & # 39;,,功能(要求的事情,,,,下一个),{ ,res.header (“Access-Control-Allow-Origin",,“http://localhost: 63342“);//前端域名 ,res.header (“Access-Control-Allow-Credentials" & # 39;真正的# 39;); ,res.header (“Access-Control-Allow-Methods",“PUT、POST、GET、删除、OPTIONS"); 接下来,(); });
<强>特别注意:>强服务器端Access-Control-Allow-Credentials=true时,参数Access-Control-Allow-Origin的值不能为& # 39;* & # 39;,必须为自己客户端项目所在地址。
3,服务器中使用会话
router.get (& # 39;/yzm& # 39;,,功能(要求的事情,,,,下一个),{ ,req.session.yzm=& # 39; abcd # 39;; } router.post(& # 39;/登录# 39;,,功能(要求的事情,,,,下一个),{ ,console.log (req.session.yzm); }
看完了这篇文章,相信你对“表达解决ajax跨域访问会话失效问题的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!