關於跨域的問題

一、在前端開發過程中，如果準備開發富應用，跨域的問題將會隨之而來。

        我們先看看什麼是跨域呢：

        所謂跨域，或者異源，是指主機名（域名）、協議、埠號只要有其一不同，就為不同的域（或源）。出於保護使用者資料的目的，瀏覽器有一個最基本的策略就是同源策略，只允許頁面內的指令碼訪問當前域的資源（載入指令碼、資源等不受此限制）。

二、如果瀏覽器廠商不對跨域請求進行處理，會給我們帶來什麼危害呢？

        有心人士（病毒製造者）會利用這個漏洞進行如下攻擊：

        1. CSRF/XSRF 攻擊，簡單的來講就是在 b.com 頁面中請求 a.com 的介面（瀏覽器會自動帶上 使用者在 a.com 的 cookie），從而獲取使用者的在 a.com 的相關資訊。

        2. XSS 注入攻擊，類似於 SQL 攻擊，提交含有惡意指令碼的資料到伺服器，從而達到破壞頁面或者獲取使用者的 cookie。

三、我們瞭解到了什麼是跨域，那我們又應該如何解決呢，現在找到了這些比較權威的文章，大家先品讀一下：

        1. mozilla 官方網站關於跨域的文章（Cross Origin），HTTP訪問控制（CORS）

        2. mozilla 官方網站關於瀏覽器同源策略的簡要介紹（Same Origin）， 瀏覽器的同源策略

四、讀完這些文章，你打算怎麼處理跨域問題呢，我先談談自己關於跨域的解決方案：

        1. 採用 CORS 協議，直接在 Nginx 中設定允許跨域的 header（也可以在後端的應用程式內設定，不過在 Nginx 入口配置的話更加統一），在 location 配置中直接使用指令 add_header（官方文件連結 ），示例配置如下：

location /  {

    proxy_pass http://backend-url;

    add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    add_header Access-Control-Max-Age 86400;

}

        2. 使用 JSONP，也是需要後端配合，利用“瀏覽器載入指令碼、資源時不受同源策略的約束”這個特性，但是這種方式非常受限制，例如只能使用 GET 請求，不能攜帶自定義 header 等。

        3. 其他的一些方法，例如 window.name, document.domain 以及 HTML5 中的特性 window.postMessage 等

五、其他參考連結

        1. 淺談JS跨域問題

        2. 跨域資源共享 CORS 詳解----阮一峰

六、宣告

        現在網路上的知識非常複雜，有些是摘自權威書籍的，有些是作者自己理解然後記錄下來的，有些是瞎掰的，所以一定要結合情況多多甄別，對於有權威文件的知識點，建議先參考文件。