关闭

前后端分离项目的跨域及保持Session会话

时间: 2018-10-31阅读: 4010标签: 接口

当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况


OPTIONS

前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求
OPTIONS称为预检请求, 通过这个请求, 浏览器会告知服务器,接下来的请求的情况

Access-Control-Request-Method: POST 
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

得到服务器的回应后浏览器便知道这次请求是否被允许


OPTIONS的处理

后台可以在拦截器或过滤器中处理这个请求, 这里以Springboot后台的拦截器为例

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) {
    String method = request.getMethod().toLowerCase();
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Expose-Headers", "TK");
    if (method.equals("options")){
        return false;
    }
    //...
    return true;
}

Access-Control-Allow-Origin 代表允许请求源, 设置为*或设置为前端的域名即可解决跨域无法请求的问题例如http://domain
Access-Control-Allow-Methods 表示允许的请求方式

以下两个特别说明
Access-Control-Allow-Headers 代表允许浏览器可以向 服务器发送哪些请求头
Access-Control-Expose-Headers 代表允许浏览器可以读取哪些服务器发送的请求头
均限制在客户端上


利用Token保持会话

传统开发前后端能维持会话, 是因为当服务器调用了HttpSession时, 会将SessionId放在请求头的set-cookie中, 浏览器读取到了这个信息, 就把SessionId保存在本地, 待下次请求时以Cookie的形式带给服务器, 服务器根据收到的SessionId找到Session 以继续会话

现在由于前后端分离后使用Cookie的种种不便, 可以换另一种方式来进行SessionId的传输, 就是把SessionId放在请求头中带给浏览器

接上一段代码

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) {
    //...
    HttpSession session = request.getSession();
    response.setHeader("TK",session.getId());
    return true;
}

由于设置了response.setHeader("Access-Control-Expose-Headers", "TK");
表示客户端可以读取header中的TK字段, 客户端就可以读取放在TK中的SessionId保存到本地, 存储方式可以是Cookie或者是LocalStorage都可以
当需要请求时用http://service;jsessionid=${token}的形式传给服务器, 这个与传统Web中Cookie:jsESSIONID=sessionid的形式效果是一致的
如此就达到了保持会话的目的了


为什么能维持会话

服务器根据sessionid保持会话这件事是容器完成的, 根据的就是请求中所传来的URL后的;jsessionid= 或者 cookie中的JSESSIONID=,
容器根据sessionid自动找到内存中的Session。
这也是选择;jsessionid=方式的原因。这会让你没有感觉像在做前后端分离的开发, 就像传统的JSP开发一样, 前后端融合在一起。

当然你也可以用其他方式手动操作, 比如直接传参 http://service?JID=${token}, 在请求头中带过去之类的, 然后手动取得ID再去找对应的Session, 不过这就有点多此一举了

原文来源:https://laboo.top/2018/10/15/http/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1231

vue中使用proxy配置不同端口和ip接口

使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致,解决问题:在vue.config.js中配置不同的端口号

TypeScript接口

接口的作用是声明变量的结构和方法,但不做具体的实现。通常,接口会强制对所有成员进行类型检查,包括数量和类型:带有可选属性的接口与普通的接口定义差不多

从TypeScript中的类中派生接口

大多数面向对象编程语言都鼓励编程到接口的模式。 TypeScript 当然支持这一点,你可以创建一个或多个接口,然后再定义生成这个接口实例的类(或工厂)。但是当程序员预期将来可能会存在多个具体实现时,有时会过度使用对接口的编程

TypeScript接口(Interfaces)来定义对象的类型

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implements)

前后端分离,接口对接问题

关于前后端对接问题下面好程序员web前端学习路线为大家解答。对于前后端分离开发,必须要写接口文档。否则,第一:前后端开发没有标准,没有依据。第二:容易扯皮,没法追踪,职责不清

浅谈JavaScript中的接口

接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概念的重要性可见一斑。

ts中接口的用法

属性接口:接口中可定义 确定属性、可选属性、任意属性、只读属性;只读属性也是确定属性,在对象变量定义的时候必须有值,此后不能修改、函数接口对方法传入的参数以及返回值进行约束

JSON API免费接口

各种提供JSON格式数据返回服务网站的API接口,为大家搜集了一些能够返回JSON格式的服务接口。部分需要用JSONP调用。

vue项目接入mock&& axios 通用配置

兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE 可以按照预定的接口文档做一些接口模拟的工作

常用HTTP接口测试工具对比

从功能上Jmeter最为强大,可以测试各种类型的接口,不支持的也可以通过网上或自己编写的插件进行扩展。SoapUI专门针对HTTP类型的两种接口,其初衷更是专门测试Soap类型接口,对于其他协议的接口不支持

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!