在最后一个冲刺以来,我始终抱着最开始对项目的积极态度来完成每一次的项目迭代。在最后一个冲刺我主要负责的模块是:用户找回密码和修改密码;改变项目用户故事下任务的状态;用户首页的平台简介、个人信息学情概览以及系统日志、关卡概览、项目概览;关卡统计界面展示个人基本信息、关卡完成人数、逾期统计、验收统计的基本信息模块;对axios进行二次封装以及整体页面的自适应;
在这个冲刺,相对于我来说有点困难的还是解决跨域的问题;之前在学习跨域的时候其实挺简单的,但是怎么说呢,我们需要解决的是cors跨域,之前怎么尝试都不行,cors跨域还是得前端和后端配合好,问题也就解决了;
首先要理解什么是cors跨域:
跨域是指跨域名的访问,当A想要向B请求资源的时候,若两个地址协议、域名、端口号有一个不一样,就是跨域请求资源;
跨域问题是浏览器对于ajax请求的一种安全限制,一个页面发起的ajax请求,只能是于当前同域名的路径,这能有效的阻止跨站攻击
withCredentials属性
在cors请求时,是默认不发送Cookie和HTTP认证信息,而在此项目中,是需要发送给服务器SESSIONID的,在请求拦截的时候就要携带服务器返回的cookie,之所以几天这个问题都没有得到解决,是我紧紧抓着前端是自动发送cookie的话,所以一直陷入一个僵局;我决定我要先搞清楚cors跨域的本质是什么?产生cors后对前端有什么影响;果然在cors请求下。默认是不发送Cookie的。在弄清这个问题后,我就手动的传递cookie,几天没有解决的问题,几个小时就解决了;
一方面服务器要指定 Access-Control-Allow-Credentials 等 字段
<mvc:cors>
<mvc:mapping path="/**" allowed-origins="*" allow-credentials="true" max-age="3600"
allowed-methods="GET,POST,PUT,DELETE,PATCH,OPTIONS" />
</mvc:cors>
另一方面,开发者必须在Ajax请求中打开withCredentials属性
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否则,即时服务器同意发送cookie,浏览器也不会发送,或者,服务器要求设置cookie,浏览器也不会处理的。
需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin
就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie
也无法读取服务器域名下的Cookie。
以上就是经过实践 我对cors跨域的深入了解。
上面的问题解决了,携带cookie的问题就不再是问题了。直接在请求拦截的时候携带cookie即可;但是注意cookie是一个敏感的词汇,具有安全隐患,浏览器是不可以直接携带的,可通过设置x-cookie解决这一问题
if (localStorage.getItem('datas')) {
let a = JSON.parse(localStorage.getItem('datas'));
let cookies = a[2]
if (cookies) {
config.headers['x-cookie'] = cookies
}
}
这个项目也迎来了尾声,这个项目我付出了100%,即使在放寒假的时候,我也是百分百投入到项目中,在第三个冲刺的时候,一边做项目一边学习react框架,我对知识的渴望、探索,都将是人生的财富;我始终记得一位老师给我说的学习是终身的事情,我也想放松下来,但我知道,社会的竞争远比学校大,只有不断的丰富自己的阅历,充实自己的生活,努力之后总会有收获的。但是有时候对自己的要求太高,也会感觉到窒息,有时候放松一下自己,也是一种进步,作为这个项目的成员,虽然没有承担所谓的角色,但是从第一次的需求审批,任何事情,我都付出了我的努力,这种渴望知识的精神可以鼓励到更多的人。
最后展示项目的时候,明明自己都测试过很多次了,但是还是没有happy ending,在经过自我总结之后,其实这并不是一件坏事,它让我明白,不要太追究自己的过失,没有人是不会犯错的,在错误中总结升华自己总比一味的埋怨自己更有意义,一切都是下一次美好的开始,