首页 > 编程知识 正文

HTTP篇之cookie设置(前端和后台)

时间:2023-05-05 15:36:53 阅读:246790 作者:3416

前台代码:

var xhr = new XMLHttpRequest();xhr.open('GET','http://localhost:3000/list');xhr.withCredentials = true;xhr.send();

XMLHttpRequest发送请求时需要设置withCredentials属性为true,来允许浏览器在自己的域设置cookie值。

如果withCredentials没有设置为true,就会出现Response Headers有Set-Cookie,但是浏览器却没有存储cookie的情况。

后台代码:

response.setHeader('Access-Control-Allow-Credentials',true);response.setHeader('Access-Control-Allow-Origin','http://localhost:63342');response.setHeader('Set-Cookie','token=cowshield');

后台设置的Access-Control-Allow-Credentials和前台设置的withCredentials是要结合使用的。

Access-Control-Allow-Origin是允许跨源的,通常设置为'*'。但是设置了Access-Control-Allow-Credentials后,就必须写跟Request Headers的Origin相同的地址了。


不然就会报下面这个错误(但是不影响请求和cookie存储..)


最后就是Set-Cookie了,后台响应后,就可以在浏览器看到


再来验证下是否真正成功了,也就是浏览器把cookie存储到当前域下


后续发送的请求就会在Request Headers里自动带上这个cookie了


这就搞定了。

总结一下:

前台要设置withCredentials,后台要设置Access-Control-Allow-Credentials。

前台发起请求的Origin(url的ip地址或者域名)一定要和后台设置的Access-Control-Allow-Origin相同。


服务器渲染的好处有哪些呢?怎么在Vue2中自定义一个图片懒加载指令

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。