跨域解決方案之nginx

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【跨域解決方案之nginx 】

你們好，我是IT修真院北京總院第24期的學員，一枚正直純潔善良的web程序員
今天給你們分享一下，修真院官網js任務5，深度思考中的知識點——跨域解決方案之nginx
1.背景介紹
什麼是跨域以及產生緣由

跨域是指a頁面想獲取b頁面資源，若是a、b頁面的協議、域名、端口、子域名不一樣，或是a頁面爲ip地址，b頁面爲域名地址，所進行的訪問行動都是跨域的，而瀏覽器爲了安全問題通常都限制了跨域訪問，也就是不容許跨域請求資源。

什麼是同源策略？

 

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。

同源策略限制如下幾種行爲：

1. Cookie、LocalStorage 和 IndexDB 沒法讀取
2.  DOM 和 Js對象沒法得到
3.  AJAX 請求不能發送

常見跨域場景

2.知識剖析
跨域解決方案

一、 經過jsonp跨域
二、 document.domain + iframe跨域
三、 location.hash + iframe
四、 window.name + iframe跨域
五、 postMessage跨域
六、 跨域資源共享（CORS）
七、 nginx代理跨域
八、 nodejs中間件代理跨域
九、 WebSocket協議跨域

3.常見問題
如何跨域

4.解決方案
nginx反向代理解決跨域

五、編碼實戰
首先找到nginx.conf

自定義本地的url請求規則 ，如 http://www.720ui.com/blog 則對應要nginx服務轉發到 http://blog.720ui.com 。

server

{

listen 80;

server_name www.720ui.com;

location ^~ /blog/ {

proxy_pass http://blog.720ui.com/;

}

}

6.拓展思考
還有什麼解決方案

jsonp,利用了src屬性能夠跨域的特性

7.參考文獻
參考一：跨域問題解決方案（Nginx）

參考二：用nginx的反向代理機制解決前端跨域問題

 
視頻連接

密碼: 9epr

ppt連接