跨域問題
問題由來：瀏覽器拒絕執行其它域名下的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請求重定向
