面試的時候問了跨域，之前知道幾種方式，不過沒有深入。既然面試官都問了，那麼估計在實踐中也會很多吧。總結學習學習！後面和同學討論後，再問了下google，發現跨域的方式真的好多。
本文意在總結和實踐各種跨域方式，然後對比每種的優缺點，希望找到最佳實踐方案。
很好的一篇文章，推薦之：
通過這篇文章知道了，網域名稱／協議／埠只要其中之一不同都不能跨域，另外二級網域名稱之間也不能跨。跨域的解決 ,有句經典的話就是，凡是有src屬性的東東，都可以用來跨域。比如img，iframe，script等。
如果練習的話，本機配置虛擬主機的教程在以前的一篇文章。
這裡，要首先弄清楚，我們跨域的目的是什麼？
我理解的是，跨域就是a.com要訪問b.com的資料，包括變數，物件等。弄清楚後就可以開始實踐這種動態script的方式了。
在127.0.0.2的test.js中，我們要把傳遞給127.0.0.1/test.php 的資料封裝好，我這裡簡單乙個例子。
//如果在php中，則可以用echo $_get(『callback』).」($data);」;來呼叫**函式。127.0.0.2/test.js
(function
() a_handler(b_myinfo);
})();
另外在127.0.0.1/test.php中：
請注意上面判斷script載入完畢的方式。還有載入完了後的銷毀，釋放記憶體。
這樣在我們訪問127.0.0.1/test.php時，結果如下：
上面的方式是兩個域我們都可以控制，在乙個域中配置好資料介面，另乙個域來動態使用。
就是獲取輸入框的內容，動態配置script的src，然後把查詢的返回過來。
注意上面src的最後乙個**函式。還有這個**函式的作用域問題。
結果如下：
這種方式主要用在主域相同而子域不同的情況，由於不好模擬，就不折騰了，等以後有需求了，在來弄吧。核心**如下：
這個方法早在08年的時候，克軍和懌飛就寫了博文介紹這這個方法。只怪生的太遲，不能跟上步伐。。站在巨人肩膀上的前提是學習前人的知識經驗。
先解釋這個方法的原理。這種方法的核心是frame的window.name屬性可以存不少資料，當內部location變化時name不變。
由三個頁面組成，127.0.0.1/test.php｜127.0.0.1/proxy.html｜127.0.0.2/index.php
我要做的是從第乙個訪問第三個中的資料。在/test.php中建立乙個frame，src指向index.php,如果直接訪問frame中的window.name會提示跨域錯誤，所以第二個proxy.html就上場了，proxy.html內容為空，但是和test.php在同乙個域。我們判斷如果把index.php載入完成後就把frame的src改成proxy.html，現在訪問就不會提示跨域錯誤了，而且剛才說過，frame的window.name不會變！
**如下：
//當訪問127.0.0.1/test.php時返回如下：index.php
這裡有點需要注意，即使是ip和網域名稱互相對應，也不能互相通訊，他們之間也算跨域。因為這個原因，調了好久。上面的localhost/proxy.html那行最開始寫成了這樣是不能通訊的。
這種跨域方式比較新，而且api簡單，容易上手，缺點就是瀏覽器支援不夠，目前就那麼幾個比較潮的支援。不過相信，不過多久就會成為主流的跨域方式～
下面的目標是兩個域互相對話。先給效果圖：
用iframe的目的是為了方便我們看到，不然還得兩個來回轉換。其實可以不用iframe的哈！
**如下:// 127.0.0.1 test.php
index.php
如大家所看，html5的postmessage核心**就postmessage和onmessage。相信不用解釋都能懂啦～
現在的flash已經不只是乙個動畫，更多的有了資料互動，與外界互動，那麼跨域也是必須要面對的問題。
由於對flash不太熟悉，只能從網上找點例子，看看原理，這裡大致解釋一下，如果有熟悉的朋友，歡迎交流指教。 大致原理就是利用flash api中的localconnecttion這個類，在需要通訊的兩個域中各巢狀乙個swf，然後互相交換資料。
別人說的，資料量限制40kb，資料快。沒有實踐，先記著吧。
用這種方式跨域通訊比較複雜，需要兩個swf，個人感覺實用性不強。
cors的全稱是cross-origin resource sharing，中文名字叫做「跨域資源共享」。目前在w3c的文件中還是草案，不過瀏覽器支援情況還是很樂觀，ie8(不是xhr而是xdr）以上的ie，chrome 4.0以上，firefox 3.5以上都支援。參見caniuse.com
最開始的時候是在高階程式設計上看到的，不過沒有仔細研究。這次弄跨域，果斷一起弄了。
其實cors和xhr差不多，唯一的差別就是cors需要伺服器支援。之前在xhr的寫法是：
xhr.open('get『，』test.php',true);
xhr.open('get','freestyle21.cn',true);差別就是url變成不同域了！但是。。直接這樣訪問肯定是不行的，要報origin is not allowed by access-control-allow-origin.的錯誤。cors的解決方案是在伺服器端該header頭部：
header("access-control-allow-origin：*");這樣再次訪問就可以了。對，cors就這麼簡單！
下面照例寫個demo。
現在訪問127.0.0.1／test.php結果如下：
通過動態script跨域，就是相當與引入乙個外部的js檔案而已，只不過這個檔案帶回來了一些有用的資料。
通過jsonp跨域，實質是http的get方式請求，把引數或者**函式傳入url，然後在服務端做好相應的介面，返回給**函式。見過別人做個的另一各種相似的方式是把引數給hash值，另一邊通過輪詢判斷hash的變化，然後利用location.hash使用這個引數。這種方式都感覺略不完美，資料放在url上很不安全，而且會產生歷史記錄，數量有限
總的來說，目前最簡單有效的方式是jsonp，如果在受信任的雙方傳遞資料，它是最佳的選擇。 在上面的例子中同樣看到了cors和postmessage的高效，在可預見的幾年內，勢必會成為主流。
js跨域 ajax跨域 跨域方式（前端）
跨域方式 cors 跨域資源共享 當使用xmlhttprequest傳送請求時，瀏覽器會自動加上乙個請求頭 origin,後端在接受到請求後確定響應後會在response headers中加入乙個屬性 access control allow origin,值就是發起請求的源位址 瀏覽器得到響應會進...
前端跨域 實踐總結，親測有效
跨域介面 這是乙個天氣預報的介面 nginx配置文件 react 中的跨域問題 使用的方法 react axios 可以通過package.json 中的 proxy 配置如下 proxy 我見網上有很多說可以詳細配置，的文件 配置如下 我這樣配置後直接啟動不起來，有知道的小夥伴可以說一下。prox...
前端跨域的幾種方式
在實際開發中，前端和後端之所以存在跨域的問題，主要是受到了 同源策略 的限制，同源 一般是指 協議 網域名稱 主網域名稱以及子網域名稱 和埠號三者相同，三者中的任何乙個不相同都算作是跨域，不同域之間的相互請求資源就算作是跨域，這樣都是會被限制的 之所以設定同源策略的限制主要是為了避免瀏覽器受到xss...