什么是跨域？session如何共享？PHP和Ajax跨域问题的解决方法 {message type="warning" content="什么是跨域？"/}跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。http://www.xtboke.com/index.html 调用 http://www.xtboke.com/api.php （非跨域）http://www.xtboke.com/index.html 调用 http://www.xtboke2.com/api.php （主域名不同:xtboke/xtboke2，跨域）http://tool.xtboke.com/index.html 调用 http://music.xtboke.com/api.php （子域名不同:tool/music，跨域）http://www.xtboke.com:8080/index.html 调用 http://www.xtboke.com:8081/api.php （端口不同:8080/8081，跨域）http://www.xtboke.com/index.html 调用 https://www.xtboke.com/api.php （协议不同:http/https，跨域）{message type="info" content="localhost和127.0.0.1虽然都指向本机，但也属于跨域。"/}{message type="warning" content="解决办法"/}跨域的解决办法有很多，本文主要分享一下通过设置Access-Control-Allow-Origin来实现跨域。例如：客户端的域名是client.xtboke.com，而请求的域名是server.xtboke.com。如果直接使用ajax访问，会有以下错误：XMLHttpRequest cannot load http://server.xtboke.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.xtboke.com' is therefore not allowed access.{message type="info" content="1.允许单个域名访问"/}指定某域名（http://client.xtboke.com）跨域访问，则只需http://server.xtboke.com/api.php文件头部添加如下代码： header('Access-Control-Allow-Origin:http://client.xtboke.com');{message type="info" content="2.允许多个域名访问"/}指定多个域名（http://client1.xtboke.com、http://client2.xtboke.com等）跨域访问，则只需在http://server.xtboke.com/api.php文件头部添加如下代码：$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array('http://client1.xtboke.com', 'http://client2.xtboke.com' ); if(in_array($origin, $allow_origin)){header('Access-Control-Allow-Origin:'.$origin);}{message type="info" content="3.允许所有域名访问"/}允许所有域名访问则只需在http://server.xtboke.com/api.php文件头部添加如下代码：header('Access-Control-Allow-Origin:*');{message type="warning" content="SESSION共享问题："/}下面是我整理的一份PHP session跨域共享的代码示例，记录一下。client.php tool.xtboke.com<?php header("Content-Type:text/html;charset=utf-8"); *session_start(); $token = md5(uniqid(rand(), TRUE)); $_*SESSION["token"]=$token; ?> <script src="//www.xtboke.com/jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $.ajax({ type:'get', url: "https://www.xtboke.com/server.php", dataType: "jsonp", jsonp:'callback', data:{ 'cToken':"<?php echo $_*SESSION['token'];?>" }, xhrFields: {withCredentials: true}, crossDomain: true, success: function(data) { $(".info").html("客户端token：" + data.cToken + "<br/>服务端token：" + data.sToken+"<br/>是否相等：" + data.ifEq); } }); </script> <div class="info"></div>server.php music.xtboke.com<?php session_*start(); $origin = isset($_SER*VER['HTTP_*ORIGIN'])? $_SER*VER['HTTP_*ORIGIN'] : ''; $allow_origin = array( 'https://tool.xtboke.com', 'https://tool2.xtboke.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); //跨域且使用session时不能使用 * header("Access-Control-Allow-Credentials: true" );//是否携带cookie } $arr = array( 'cToken'=>$_*GET['cToken'], 'sToken'=>$_*SESSION['token'], 'ifEq'=>$_*SESSION['token']==$_*GET['cToken']?'yes':'no' ); $callback = !empty($_*GET['callback']) ? trim($_*GET['callback']) : ''; if(!empty($callback)) { echo $callback."(".*json_encode($arr).")"; }else{ echo *json_encode($arr); }

不刷新页面，修改浏览器url地址 最近的项目遇到的问题，记录一下，不刷新页面，修改浏览器url地址。直接上代码： var url= window.location.href; if(url.indexOf("info/")>0){ url= url.substr(0,url.length-1); history.pushState("", "", url+'912'); }主要用的是history的pushState方法，上面这段代码实现的是，如果存在info/，就替换info/后面的参数，而不发生页面的刷新。后面再详细和大家整理一下 history的pushState和replaceState。

一行CSS代码给网站博客添加灰色默哀色 一行CSS代码给网站博客添加灰色默哀色html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }1%到100%，可设置灰色深度。 html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }

一行CSS代码给网站文本文字添加颜色动态变化 {message type="success" content="一行CSS代码给网站文本文字添加颜色动态变化"/}一行CSS代码给网站文本文字添加颜色动态变化 .word-color-change{animation:change 10s infinite; }@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}.word{animation:change 10s infinite; }@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}代码中.word为html标签class值，或ID值，color后面是十六进制颜色码，不知道什么颜色适合你，可以从下面网站参考： https://www.bootcss.com/p/websafecolors/

聊聊rel=external nofollow和rel=noopener noreferrer {message type="info" content="大家应该都知道rel=’nofllow’的作用，它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像 统计代码、备案号链接、供用户查询的链接等等。"/}除了rel=’nofollow’还有两种链接属性形式，一种是rel=’external’，另一种是rel=’external nofollow’。这两种分别代表什么意思呢？又有何区别呢？{callout color="#0f73f5"}rel="external"{/callout}此属性的意思是告诉搜索引擎，这个链接不是本站链接，其实作用相当于target=‘_blank’。为什么要这样写呢？因为有些网站因为是采用严格的DOCTYPE声名的，如果你在网页源码中的第一行看到：在这种情况下target=”_blank”会失效，因此采用rel=’external’这个参数来替代。{callout color="#0f73f5"}rel="external nofollow"{/callout}其实上面已经说过rel=’nofollow’ 和 rel=’external’ 两种属性的所代表的意思了。这个属性基本上是相当于将两种属性结合起来，大致可以解释为 “这个链接非本站链接，不要爬取也不要传递权重”。因此在SEO的角度来说，是一种绝对隔绝处理的方法，可以有效减少蜘蛛爬行的流失。{callout color="#0f73f5"}rel="nofollow noopener noreferrer"{/callout}超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。为了告知来自于不受保护的站点的用户，我们运行一个利用了这个缺陷的脚本。if (window.opener) { window.opener.location="https://tool.xtboke.com?referrer="+document.referrer; } 我相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为，原始页面需要在每个使用了target="_blank"的链接中加上一个rel="noopener"属性。然而，火狐不支持这个属性值，所以实际上你要用 rel="noopener noreferrer"来完整覆盖。