跨域使用场景, 从前端角度来谈

跨域传递数据,这种网上解析说明都很多啦。

今天,想从一个前端开发的角度来简单来说一下:一个在没有后端人员配合的情况下,前端在跨域上能做什么。

请求跨域数据方式有很多:
1.  jsonp (动态数据需后端配合, 静态数据可纯前端实现)
2.  window.postMessage  (纯前端可实现)
3.  window.name   (纯前端可实现)
4.  document.domain  (纯前端可实现)
5. Access-Control-Allow-Origin (需后端配合)

ps: 所谓动态数据指数据会实时变化的数据比如用户信息,不同的用户有不同信息;
       静态数据指写死的数据;

使用场景
1. 通常,能保存在用户客户端上的数据用2,3,4 方法来实现跨域,即纯前端就可以做好了
举例: 用户登录了一次淘宝页面,此时淘宝会保存用户的登录信息在cookie或其他storage里;
用户再打开天猫页面,因天猫和淘宝域名不同,不能直接用cookie或storage获取用户登录数据,那么怎么实现呢?
window.postMessage,window.name, document.domain 都可以。
因为这些数据,淘宝前端数据已经保存过了,前端开发者可以直接提供一个新的HTML页面将这些数据封装到message里或name等地方,天猫页面可通过iframe加载该HTML页面获取数据


2. 存在数据库里的信息,一般用1,5 方法可实现;
前端获取不到的数据只能由后端提供了


补充:跨域传递cookie

A页面保存了有用的cookie,不同域名的B页面想要使用,该怎么办?
浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie
1.服务器端使用CROS协议解决跨域访问数据问题时,需要设置响应消息头Access-Control-Allow-Credentials值为“true”。同时,还需要设置响应消息头Access-Control-Allow-Origin值为指定单一域名(注:不能为通配符“*”)
2.客户端需要设置Ajax请求属性withCredentials=true,让Ajax请求都带上Cookie。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。