一、在前端開(kāi)發(fā)過(guò)程中，如果準(zhǔn)備開(kāi)發(fā)富應(yīng)用，跨域的問(wèn)題將會(huì)隨之而來(lái)。
????????我們先看看什么是跨域呢：
????????所謂跨域，或者異源，是指主機(jī)名（域名）、協(xié)議、端口號(hào)只要有其一不同，就為不同的域（或源）。出于保護(hù)用戶數(shù)據(jù)的目的，瀏覽器有一個(gè)最基本的策略就是同源策略，只允許頁(yè)面內(nèi)的腳本訪問(wèn)當(dāng)前域的資源（加載腳本、資源等不受此限制）。
二、如果瀏覽器廠商不對(duì)跨域請(qǐng)求進(jìn)行處理，會(huì)給我們帶來(lái)什么危害呢？
? ? ? ? 有心人士（病毒制造者）會(huì)利用這個(gè)漏洞進(jìn)行如下攻擊：
? ? ? ? 1. CSRF/XSRF 攻擊，簡(jiǎn)單的來(lái)講就是在 b.com 頁(yè)面中請(qǐng)求 a.com 的接口（瀏覽器會(huì)自動(dòng)帶上 用戶在 a.com 的 cookie），從而獲取用戶的在 a.com 的相關(guān)信息。
? ? ? ? 2. XSS 注入攻擊，類似于 SQL 攻擊，提交含有惡意腳本的數(shù)據(jù)到服務(wù)器，從而達(dá)到破壞頁(yè)面或者獲取用戶的 cookie。
三、我們了解到了什么是跨域，那我們又應(yīng)該如何解決呢，現(xiàn)在找到了這些比較權(quán)威的文章，大家先品讀一下：
????????1. mozilla 官方網(wǎng)站關(guān)于跨域的文章（Cross Origin），HTTP訪問(wèn)控制（CORS）
????????2. mozilla 官方網(wǎng)站關(guān)于瀏覽器同源策略的簡(jiǎn)要介紹（Same Origin），?瀏覽器的同源策略
四、讀完這些文章，你打算怎么處理跨域問(wèn)題呢，我先談?wù)勛约宏P(guān)于跨域的解決方案：
????????1. 采用 CORS 協(xié)議，直接在 Nginx 中設(shè)置允許跨域的 header（也可以在后端的應(yīng)用程序內(nèi)設(shè)置，不過(guò)在 Nginx 入口配置的話更加統(tǒng)一），在 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，也是需要后端配合，利用“瀏覽器加載腳本、資源時(shí)不受同源策略的約束”這個(gè)特性，但是這種方式非常受限制，例如只能使用 GET 請(qǐng)求，不能攜帶自定義 header 等。
? ? ? ? 3. 其他的一些方法，例如 window.name, document.domain 以及 HTML5 中的特性 window.postMessage 等
五、其他參考鏈接
? ? ? ? 1.?淺談JS跨域問(wèn)題
? ? ? ? 2. 跨域資源共享 CORS 詳解----阮一峰
六、聲明
? ? ? ? 現(xiàn)在網(wǎng)絡(luò)上的知識(shí)非常復(fù)雜，有些是摘自權(quán)威書籍的，有些是作者自己理解然后記錄下來(lái)的，有些是瞎掰的，所以一定要結(jié)合情況多多甄別，對(duì)于有權(quán)威文檔的知識(shí)點(diǎn)，建議先參考文檔。
