前端的跨域解決原理

1，我們先來說一下什麼是跨域

a.瀏覽器有同源策略，不允許ajax訪問其他域接口

b.跨域條件：協議、域名、端口有一個不同就算跨域

例如：

我的網站：http://www.my.com/page.html

你的網站：http://www.your.com/page.html

當我想要在我的網站下通過ajax訪問你的網站的接口是不可以的，因爲域名不一樣，這就是跨越；

但是呢有三個標籤是允許跨域加載資源的：

a.<img src=xxx>(防盜鏈不說，瀏覽器是不會限制的);

b.<link href=xxx>你可以加載別的網站的css;

c.<script src=xxx>可以加載其他網站的js

這三個標籤的場景

a.<img>用來打點統計，統計網站可能是其他域

b. <link><script>可以用於cdn,cdn也是其他域；

c.<script>可以用於jsonp,這也是我們接下來實現跨域的條件

跨域的注意事項：

a.所有的跨域請求都要經過信息提供方允許

b.如果未經允許就獲取到信息，那是瀏覽器同源策略出現漏洞

jsonp實現原理：

a.服務器可以根據請求動態生成一個文件返回；

例如你要訪問百度下面的一個接口，這個接口是http://www.baidu.com/api.js,接口返回的內容是callback({x:1,y:2})，相當於返回一個函數，參數就是返回給你的內容；

這時候我們的實現形式就應該是：首先定義一個函數callback;然後請求接口，接口返回執行callback,這時我們就得到了返回的數據，如下：

<script>
window.callback=function(data){
console.log(data)
}
</script>
<script src="http://www.baidu.com"></script>

另一個方法是服務器端設置http header；

這裏只是原理的分析，後續我們會進行實踐的操作