淘淘商城第103讲——js跨域分析

通过前几讲的学习，我有理由相信大家都写完了用户登录这个接口，登录的时候我们把token写入到了Cookie当中，登录成功后，我们查看Cookie的信息，如下图所示，发现是有token信息的。

我们回到登录页面，同样也可以看到token信息，如下图所示，而且可以清楚地看到与淘淘商城首页的token信息是完全一致的。

虽说域名一样（都叫localhost），但是端口不同就已经属于跨域了，而我们就是要来解决跨域问题的。

从淘淘商城首页（即index.jsp页面）说起，如下图所示，可以看到商城首页头部的信息都在header.jsp页面当中。

我们找到header.jsp页面并查看其内容，发现登录和注册超链接都在shortcut.jsp页面当中，如下图所示。

在shortcut.jsp页面当中，我们可以看到登录和注册这样的字样，它们都是一个超链接，点击它们的时候会去触发js方法，如下图所示。

但我们惊奇的发现，在shortcut.jsp页面当中压根就没有js代码，那么js代码在哪儿呢？由于shortcut.jsp是header.jsp页面的一部分，而header.jsp又是index.jsp页面的一部分，因此我们按照由低到高的顺序来找，结果在header.jsp页面当中，我们发现引用了一个base-v1.js的脚本文件，如下图所示。

那么我们便来看下这个脚本文件，到js目录下找到该脚本文件，打开它，如下图所示，可以看到当前login和regist方法的链接地址确实是不正确的。

我们需要修改下链接地址，修改成如下所示的样子：

function login() {return location.href = "http://localhost:8088/page/login";
}
function regist() {return location.href = "http://localhost:8088/page/register";
}

修改完这段js代码之后，我们来刷新淘淘商城首页（此时并不需要重启taotao-portal-web工程），然后点击登录和注册按钮，发现都可以正常跳转到相应的页面了，这里我就不截图了。

如果我们想要在淘淘商城首页拿到登录用户的信息的话，那么就需要先拿到token，然后根据token调用单点登录系统的接口来获取用户信息。那么你可能就要问了，淘淘商城首页中的代码又是怎样写的呢？我们先找到footer.jsp页面（这是淘淘商城的页脚，所有页面都会引入这个页脚），在该页面当中可以看到引入了一个taotao.js的脚本文件，如下图所示。

我们打开taotao.js这个脚本文件，如下图所示，可以看到该文件中的内容是来处理获取用户登录信息的，而且还可以看到token是能从Cookie中直接获取到的，如果能获取到token，那么就拿token去调用单点登录系统的相应接口，只不过这儿写的ajax请求地址不正确，我们需要修改一下。

还有，我们现在还不熟悉jsonp，因此我们暂且先把dataType : "jsonp"修改为dataType : "json"，修改后的checkLogin方法如下所示：

var TT = TAOTAO = {checkLogin : function(){var _ticket = $.cookie("TT_TOKEN"); // 从Cookie中获取数据，即获取tokenif(!_ticket){return ;}$.ajax({// http://localhost:8084/user/token/123?callback=funurl : "http://localhost:8088/user/token/" + _ticket,dataType : "json",type : "GET",success : function(data){if(data.status == 200){var username = data.data.username;var html = username + "，欢迎来到淘淘！<a href=\"http://www.taotao.com/user/logout.html\" class=\"link-logout\">[退出]</a>";$("#loginbar").html(html);}}});}
}$(function(){// 查看是否已经登录，如果已经登录查询登录信息TT.checkLogin();
});

那么现在能不能在淘淘商城首页正常获取到用户信息呢？我们来试一下，来到淘淘商城首页并刷新，首先看一下当前有没有token信息，如下图所示，发现是有token信息的，若没有则干脆重新登录一遍。这里啰嗦一句，能够看到Cookie并不代表该Cookie一定能用，因为有可能该Cookie中的token信息在缓存Redis当中已经过期了，不过过期了也没关系，拿着过期的token去获取用户信息返回的TaotaoResult对象中封装的状态码是400，而不是200，而上面的js代码判断只有状态码是200时才会将登录和注册超链接换成用户名和退出超链接。

而且我们还能从Console一栏中看到显示出了一个错误，错误的内容当中包含有Access-Control-Allow-Origin，这就说明已经跨域了！为什么会跨域呢？这是因为我们在taotao-portal-web工程中访问taotao-sso-web工程时，这两个工程的端口号是不一样的，一个是8082，另一个是8088，这就牵涉到跨域的问题了，而js从设计之初就是不支持跨域的。

既然有了跨域问题，我们总得解决啊！目前解决跨域问题大多数都是使用的jsonp方式，jsonp是利用了js的一个特点（或者你可以说是一个漏洞）来实现跨域的。

我们先看下访问请求是否正确，同时也看下token是否过期，我们点击错误信息当中的http://localhost:8088/user/token/a3ff2e61-595e-4952-b90e-2a58935930fb链接，看到下图所示的结果就说明该token还未过期。

关于js跨域分析我就总结到这，至于jsonp，我们下文再来继续介绍，敬请期待。

淘淘商城第103讲——js跨域分析相关推荐

window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...
【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
常见js跨域解决方案
以下为几种常见js跨域解决方案: ajax跨域请求一.使用jsonp方式实现跨域请求 $.ajax({async: false, type:"POST",dataType: 'j ...
JS 跨域问题常见的五种解决方式
JS 跨域问题常见的五种解决方式一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来 ...
chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持 1.设置 document.domain为一致推荐1 2.Apache 反向代理推荐1 3. ...
js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...

淘淘商城第103讲——js跨域分析

淘淘商城第103讲——js跨域分析相关推荐

最新文章

热门文章