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