Design and Implementation of an Online Course Purchase System(32)

Application of JSONP to achieve login and registration page integration home page

Posted by Chen Xingxu on June 3, 2020

易课寄在线购课系统开发笔记(三十二)–应用JSONP实现登录注册页面整合首页

登录注册页面整合首页

首页跳转到登录、注册页面

首页展示用户名

1、当用户登录成功后,在 Cookie 中有 token 信息。

2、从 Cookie 中取 token 根据 token 查询用户信息。

3、把用户名展示到首页。

方案一:在 Controller 中取 Cookie 中的 token 数据,调用 SSO 服务查询用户信息。

方案二:当页面加载完成后使用js取 token 的数据,使用 AJAX 请求查询用户信息。

问题:服务接口在 SSO 系统中。sso.ecourses.com (localhost:8088),在首页显示用户名称,首页的域名是 www.ecourses.com (localhost:8082),使用 AJAX 请求跨域了。

JS 不可以跨域请求数据。

什么是跨域:

1、域名不同

2、域名相同端口不同。

解决 JS 的跨域问题可以使用 JSONP。

JSONP 不是新技术,跨域的解决方案。使用 JS 的特性绕过跨域请求。 JS 可以跨域加载 JS 文件。

JSONP 原理

JSONP 实现

客户端

使用 jQuery。

服务端

1、接收 callback 参数,取回调的 JS 的方法名。

2、业务逻辑处理。

3、响应结果,拼接一个 JS 语句。