学习淘淘商城第九十四课（js跨域分析）

         上节课我们一起学习了登录，登录的时候我们把token写到了cookie当中，登录成功后，我们查看Cookie信息，如下图所示，发现是有token信息的。

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

          不同的端口就已经属于跨域了，而我们就是要解决跨域问题。

          首先我们修改下淘淘商城首页的登录和注册链接地址，因为目前这两个链接地址都不正确。

         

           我们从淘淘商城首页的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代码之后，我们来刷新淘淘商城首页（不用重启工程），然后点击登录和注册按钮，发现都可以正常跳转到相应的页面（这里就不贴图了）。

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

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

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

checkLogin : function(){
		var _ticket = $.cookie("TT_TOKEN");
		if(!_ticket){
			return ;
		}
		$.ajax({
			url : "http://localhost:8088/user/token/" + _ticket,
			//dataType : "jsonp",
			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);
				}
			}
		});
	}

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

         接着我们查看Console一栏，发现报错了，报的错误当中包含"Access-Control-Allow-Origin"，这就说明跨域了！为什么会跨域呢？这是因为我们在taotao-portal-web工程访问taotao-sso-web工程，这两个工程的端口号是不一样的，一个是8082，另一个是8088，这就涉及到了跨域，而js从设计之初就不支持跨域的。

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

           我们先看下访问请求是否正确，同时也看下token是否过期，我们点击错误当中的 http://localhost:8088/user/token/d4205893-c717-4d97-aa90-ba23589fd76e这个链接，看到下面的结果说明该token还未过期。

            本小节就到这儿，关于jsonp我们下节继续介绍。