** '#'最近看了一些關於前端跨域的文章有所感受，記錄一下，好腦子比不過爛筆頭嘛...**

最近看了一些關於前端跨域的文章，我以前看到跨域一臉懵逼的臉終於有所好轉了。

轉載-跨域的幾種常見的解決方式

轉載-跨域有幾種處理方式？

這個兩篇寫的都很好，我如今也是抱着作筆記的心態收藏了

首先看看域名地址的組成：

http:// www . google : 8080 / script/jquery.js
複製代碼

  http:// （協議號）

  www （子域名）

  google （主域名）

   8080 （端口號）

  script/jquery.js （請求的地址）

• 當協議、子域名、主域名、端口號中任意一各不相同時，都算不一樣的「域」。
• 不一樣的域之間相互請求資源，就叫「跨域」。

那麼是什麼同源策略呢？

同源策略/SOP（Same originpolicy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。 2、出現跨域問題的狀況 因爲在工做中須要使用AJAX請求其餘域名下的請求，可是會出現拒絕訪問的狀況，這是由於基於安全的考慮，AJAX只能訪問本地的資源，而不能跨域訪問。

好比說你的網站域名是 aaa.com，想要經過AJAX請求 bbb.com域名中的內容，瀏覽器就會認爲是不安全的，因此拒絕訪問。

會出現跨域問題的幾種狀況：

3、處理跨域的方法1 -- 代理

這種方式是經過後臺(ASP、PHP、JAVA、ASP.NET)獲取其餘域名下的內容，而後再把得到內容返回到前端，這樣由於在同一個域名下，因此就不會出現跨域的問題。

好比在A（ www.a.com/sever.php ）和B （www.b.com/sever.php ）各有一個服務器，A的後端 （www.a.com/sever.php ）直接訪問B的服務，而後把獲取的響應值返回給前端。也就是A的服務在後臺作了一個代理，前端只須要訪問A的服務器也就至關與訪問了B的服務器。這種代理屬於後臺的技術，因此不展開敘述。

4、處理跨域的方法2 -- JSONP

假設在http://www.a.com/index.php這個頁面中向http://www.b.com/getinfo.php提交GET請求，那麼咱們在www.a.com頁面中添加以下代碼：

//建立一個script元素

var Scr = document.reateElement('script');

//聲明類型

Scr.type='text/javascript';

//添加src屬性，引入跨域訪問的url

Scr.src='www.b.com/gerinfo.php';

//在頁面中添加新建立的script元素

document.getElementsByTagName('head')[0].appendChild(Scr)

當GET請求從http://www.b.com/getinfo.php返回時，能夠返回一段JavaScript代碼，這段代碼會自動執行，能夠用來負責調用http://www.a.com/index.php頁面中的一個callback函數。看下面一個列子：

在www.b.com頁面中：

注意：JSONP只支持 「GET」 請求，但不支持 「POST」 請求。

5、處理跨域的方法3 -- NGINX的反向代理

nginx支持配置反向代理，經過反向代理實現網站的負載均衡。這部分先寫一個nginx的配置，後續須要深刻研究nginx的代理模塊和負載均衡模塊。 nginx經過proxy_pass_http 配置代理站點，upstream實現負載均衡。

這是第一次在這個平臺上寫，主要是給本身作個筆記，之後遇到相似問題有東西能夠翻翻看，但願你們多給點意見，前端菜鳥一枚，勿噴，感謝！！