1.什么情況下是跨域？
跨域是指a頁(yè)面想獲取b頁(yè)面資源，如果a、b頁(yè)面的協(xié)議、域名、端口、子域名不同，或是a頁(yè)面為ip地址，b頁(yè)面為域名地址，所進(jìn)行的訪問(wèn)行動(dòng)都是跨域的。（如下圖都是跨域訪問(wèn)）
| Uri | 說(shuō)明 | 是否跨域 |
|---|---|---|
| http://www.cnblogs.com/a.js | ||
| http://www.a.com/b.js | 不同域名 | 是 |
| http://www.a.com/lab/a.js | ||
| http://www.a.com/script/b.js | 同域名下不同文件 | 否 |
| http://www.a.com:8000/a.js | ||
| http://www.a.com/b.js | 同域名下不同端口 | 是 |
| http://www.a.com/a.js | ||
| https://www.a.com/b.js | 同域名 不同協(xié)議 | 是 |
| http://www.a.com/a.js | ||
| http://70.32.92.74/b.js | 域名和域名對(duì)應(yīng)ip | 是 |
| http://www.a.com/a.js | ||
| http://script.a.com/b.js | 主域名相同 子域名不同 | 是（cookie不可訪問(wèn)） |
| http://www.a.com/a.js | ||
| http://a.com/b.js | 同一域名，不同二級(jí)域名（同上） | 是 |
2.跨域?qū)е铝耸裁磫?wèn)題？
瀏覽器為了安全問(wèn)題一般都限制了跨域訪問(wèn)，也就是不允許跨域請(qǐng)求資源。也就是如果在a界面訪問(wèn)跨域的b界面，會(huì)被瀏覽器拒絕。但是這種需求是普遍存在的，所以就需要我們解決跨域訪問(wèn)的問(wèn)題。
3. 為什么采用Nginx的反向代理功能解決跨域
在網(wǎng)上可以看到很多的跨域的解決方案，但是大部分都需要服務(wù)器端的配合，我們采用Nginx的反向代理可以不需要通過(guò)服務(wù)器來(lái)解決這個(gè)問(wèn)題。
4. Nginx的反向代理功能解決跨域的實(shí)現(xiàn)
4.1 原理：
nginx作為反向代理服務(wù)器，就是把http請(qǐng)求轉(zhuǎn)發(fā)到另一個(gè)或者一些服務(wù)器上。通過(guò)把本地一個(gè)url前綴映射到要跨域訪問(wèn)的web服務(wù)器上，就可以實(shí)現(xiàn)跨域訪問(wèn)。對(duì)于瀏覽器來(lái)說(shuō)，訪問(wèn)的就是同源服務(wù)器上的一個(gè)url。而nginx通過(guò)檢測(cè)url前綴，把http請(qǐng)求轉(zhuǎn)發(fā)到后面真實(shí)的物理服務(wù)器。并通過(guò)rewrite命令把前綴再去掉。這樣真實(shí)的服務(wù)器就可以正確處理請(qǐng)求，并且并不知道這個(gè)請(qǐng)求是來(lái)自代理服務(wù)器的。
4.2 具體解決方案如下：
在nginx.conf中編輯
然后我把項(xiàng)目部署在nginx的html根目錄下，在ajax調(diào)用時(shí)設(shè)置url從http://www.lyz.com/apistest/test變?yōu)?apis/apistest/test然后成功解決。
server {
location / {
root html;
index index.html index.htm;
//允許cros跨域訪問(wèn)
add_header 'Access-Control-Allow-Origin' '*';
}
//自定義本地路徑
location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://www.lyz.com;
}
}
比如我之前請(qǐng)求的Ajax如下：
$.ajax({
type:"post",
dataType: "json",
data:{'parameter':JSON.stringify(data)},
url:"http://www.lyz.com/apistest/test",
async: flag,
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type", submitType.Content_Type);
xhr.setRequestHeader("user-id", submitType.user_id);
xhr.setRequestHeader("role-type", submitType.role_type);
xhr.setRequestHeader("access-token", getAccessToken().token);
},
success:function(result, status, xhr){
}
,error:function (e) {
layerMsg('請(qǐng)求失敗，請(qǐng)稍后再試')
}
});
修改成如下的請(qǐng)求即可：
$.ajax({
type:"post",
dataType: "json",
data:{'parameter':JSON.stringify(data)},
url:"/apis/apistest/test",
async: flag,
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type", submitType.Content_Type);
xhr.setRequestHeader("user-id", submitType.user_id);
xhr.setRequestHeader("role-type", submitType.role_type);
xhr.setRequestHeader("access-token", getAccessToken().token);
},
success:function(result, status, xhr){
}
,error:function (e) {
layerMsg('請(qǐng)求失敗，請(qǐng)稍后再試')
}
});
https://blog.csdn.net/l1028386804/article/details/79488328
https://blog.csdn.net/qq_31617637/article/details/72955239
http://www.mamicode.com/info-detail-2376828.html
http://seanlook.com/2015/05/17/nginx-location-rewrite/
https://blog.csdn.net/sherry_chan/article/details/79055211
https://www.cnblogs.com/zhuzhenwei918/p/6866094.html
