跨域问题
问题由来:浏览器拒绝执行其它域名下的ajax运作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://192.168.59.129/cros",true); //这里的URL是我nginx的服务地址
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
这里我本地模拟了ajax请求我的nginx服务器获得的页面是
但是按住按钮并不能加载出nginx返回的数据,而正常访问nginx却可以获取数据
这是因为chrome拒绝执行ajax请求得到的返回值
此问题常见解决方案:
1、最常用的是,jsonp。此方案需要前后端共同协作来解决。
2、cors跨域,此方式非常优雅,是w3c组织制定的解决方案。为目前主流方案。方案流程如下图:
当chrome发现ajax请求的网址,与当前主域名不一致(跨域)时,会在请求header中追加值页面主域名值,即:origin
nginx在接收到ajax请求时,会查看origin值,即请求我的网址是谁?
此处使用正则来校验,nginx追加header值:access-control-allow-origin = (匹配所有)
chrome收到ajax返回值后,查看返回的header中access-control-allow-origin的值,发现其中的值是,正是所有的页面主域名。这是允许访问,于是执行ajax返回值内容。
防盗链
目的:
1、让资源只能在我的页面内显示
2、不能单独来取或者下载
流程:
1、chrome以url1首次请求web服务器,得到html页面。
2、chrome再次发起url2资源请求,携带referers = url1。(注意,是url1,不是本次的url2)
3、nginx校验referers值,决定是否允许访问。
4、下面是nginx校验referers值的过程:
valid_referers:匹配域名白名单,如果不匹配,把内置变量$invalid_referers置为1,进入if块,返回404
缓存
expires命令:过期时间
https
https浏览器上公钥(在证书里),如下图
交互过程:
a.浏览器使用公钥,把数据加密后,再发送出去经过公钥加密内容,只有有私钥的人(nginx服务器)才看得懂。
b.nginx配置https的时候,需要两个东西:(此两样需购买)一个key,私钥。放在nginx服务器里面,仅此一份一个证书,公钥,供浏览器去下载。
配置方式如下图:
c.配置好https方式之后,对http请求重定向