2018年3月面試心得《跨域問題》

金三銀四，換工做大季，這段時間應該很多被面到懷疑人生的孩子，就包括本寶寶。
爲了下次面試不被虐到，默默的拿出小本本記錄全部的問題了。
我不會告訴你寫這個系列是由於昨晚接到阿里面試被虐成了渣渣而後一我的在那裏尬笑了好久！！！

首先什麼是跨域

瀏覽器有一個同源策略，爲了保護用戶的信息安全，你看咱們Cookie不是每次都會傳給後端咩，那若是其餘域名下還能夠訪問我這個網站的Cookie，還怎麼保證數據的安全咧。

---

那麼什麼狀況不是同一域呢～

• http或者https之類的協議不相同，即屬於跨域。

例如：

http://www.baidu.com
https://www.baidu.com

• 不一樣域名固然也屬於跨域。

例如：

http://www.baidu.com
http://www.bilibili.com

• 不一樣二級域名也屬於跨域

例如：

http://www.baidu.com
http://hehe.baidu.com

• 端口不一致也屬於跨域

例如：

http://www.baidu.com:8080
http://www.baidu.com  /* 默認端口是80，因此咧，你80的端口能夠直接輸入地址的*/

那麼，接下來就會問你跨域的方式有哪些。
固然有的面試官還不給人機會扯上面我剛刷上的技能點就開始問下一道問題，啊西吧。

---

跨域的幾種方式

嘿嘿，首先列一下經常使用的幾種。

1. proxy代理
2. cors
3. JSONP
4. xdr （這個呢，是針對ie八、9的解決方式，由於我最常寫的是移動端的，因此這個也瞭解的很少。）

扯點閒話，我是16年年末纔開始接觸到跨域這種東西的，以前懵懂階段在css和js上面撞的頭破血流，固然如今這倆也沒有對我有多友好，只有我待他們如同親孫子通常的愛護。哼！
生硬的文字讓人想睡覺啊…………
可是你要想你每多回答對一道題，你的工資也許就往上漲1k啊！！！
雖然以上是個人猜測，不過仍是有機會的，咩哈哈哈哈哈哈哈哈……哈…哈…哈……

---

咱們如今比喻一下。

我當前在的這個域就是一個房子，跨域就是我要去拿隔壁房子裏的東西，由於同源政策，因此我不能把手伸出房子的窗戶，可是我能夠從窗戶口去拿取或者丟出東西。

下面來詳細說說這幾個代理的方式哈，通常問的比較多的就是二、3了，若是對代理沒興趣直接下拉一下就看到了。

---

proxy代理

這個就很好理解啦，所謂的同源政策不是瀏覽器發出的咩。
就像個人手只能在我本身的屋子裏伸，只能夠經過這個窗戶口出去，煙囪什麼其餘地方我都伸不出去。
那麼我找一個站在我窗口的人，藉助他的手把個人請求丟給隔壁屋子的人，而後再借用他的手把我要的東西還給我。

經常使用的工具備ngnix、webpack。

先說webpack吧，你看vue腳手架裏面，配置代理十分的簡單，只須要在config目錄找到index.js，dev裏添加proxyTable就好啦。

proxyTable: {

      '/api': {

            target: 'http://aa.bb.com:8989', // 你接口的域名  http://aa.bb.com:8989

            //secure: false,      // 若是是https接口，須要配置這個參數

            changeOrigin: true,     // 若是接口跨域，須要進行這個參數配置

            pathRewrite: {

              '^/api': ''//這裏理解成用‘/api'代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 
            //好比我要調用'http://aa.bb.com:8989/hahahah'，直接寫‘/api/hahah'便可

            }

        }

  　},

而後ngnix的配置是這樣的，修改nginx.conf裏面的server裏面的location裏面的proxy_pass。
嘿嘿嘿嘿看不懂不要緊，我寫個例子。

server {
    listen       80;                                                         
    server_name  0.0.0.1; // 你本身頁面裏面寫的請求地址

    #默認請求
    location / {
        proxy_pass http://aa.bb.com/; // 幫你轉到你真正要請求的地址
    }
}

大體是這樣的，其他的要去看文檔哦，看文檔的寶寶是最棒的。

---

cors（Cross-origin resource sharing）

哇塞這個就碉堡了，幾乎全部瀏覽器都支持，可是ie必須10以上。
這是啥呢，其本身翻譯英文去。 _

這裏丟上阮大神的文章
連接描述

嗯嗯若是想詳細瞭解的話，能夠去看看。

我這裏大體借用阮老師的話總結一下。

跟JSONP比較：

JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

請求方式：

要在服務器端的response header裏面加一個 Access-Control-Allow-Origin: 指定域名|| ( 表示全部域名均可以跨域), 瀏覽器端即可以發起post的跨域請求。

說實話我對這個也不是特別的瞭解，因此之後瞭解到仍是會補充噠～

---

JSONP

終於到你了，這個讓我悲喜交加的朋友。
我以前面試也問過這個問題，個人回答大都是……

靜態文件不受同源政策影響，我能夠返回一個script裏面有一個回調函數，函數的裏面是我要的東西。

通常這麼說普通面試官都能被我忽悠過去了，可是！！！！
可是總有忽悠不過去的！！！
這裏仍是簡單介紹一下吧，原理能夠簡單說明，但是基礎知識不能，仍是要補的。
先丟上我朋友發個人一張圖

首先：咱們從基礎的提及。
我如今有兩個js

a.js

var name = '啊西吧～'

b.js

console.log(name)

先運行a，再運行b，咱們的name就出來了。
jsonp自己也就是這樣的。

jsonp的原理就是手動建立script，而後script.src = 'b.js'。

能夠簡單的說，咱們的步驟是這樣的：
建立a.js => 請求數據、建立b.js => 運行b.js而後調用a.js

其中跨域的地方，就藏在第二點這裏。

a.js

function a(data) {
    alert(`我是從${data.url}網站來的，我叫${data.name}`)
}

b.js（經過設置這個script的src

a({url: '尼叩', name: '大吉祥'})

嗯嗯結束了。
其實並無，關於這個我查了很多資料，有的對有的錯，可是至少使用上來看這麼理解比較簡單一點……
具體各位寶寶仍是要多看看基礎噠。

---

xdr

不得不說，這個我沒用過，待朕去查詢一番。

………………
………………
………………
好了我找完了。

首先打開官方文檔，給他一個介紹。

經過使用 Internet Explorer 8 中的跨域請求（縮寫爲「XDR」），開發人員能夠建立跨網站數據聚合方案。 這個名爲 XDomainRequest 的請求與 XMLHttpRequest 對象相似，但編程模型更加簡單，它能夠提供一種最簡單的方式來向支持 XDR 的第三方站點發出匿名請求，並選擇使這些站點的數據可跨域使用。 只需三行代碼便可生成基本的跨站點請求。 這將確保針對公共站點（例如，博客或其餘社交網絡應用程序）的數據聚合簡單、安全和快速。

可是由於我沒怎麼遇到過，我相信如今也仍然有很多公司須要兼容ie低級瀏覽器，不過也是很大部分不須要兼容的，因此詳細去看可能讓你犯困～
那我來總結一下。

由於咱們強大而堅挺的ie低版本瀏覽器並不支持cors的跨域方法，這個時候xdr就誕生了。
它實現了CORS的部分規範，只支持GET/POST形式的請求。另外在協議部分只支持http和https。

在服務器端，依舊要求在響應報頭添加"Access-Control-Allow-Methods"標籤（這點跟CORS一致）

使用方法以下：

建立一個XDomainRequest的實例，調用open()方法，再調用send()方法。但與XHR對象的open()方法不一樣，XDR對象的open()方法只接收兩個參數：請求的類型和URL，由於全部XDR請求都是異步執行的，不能用它來建立同步請求。

請求返回以後，會觸發load事件，相應的數據也會保存在responseText屬性中

---

哎呀終於打完了，蜜汁感動。
面試嘛，其實就是掏你底細的一種辦法，我仍是小白一隻，雖然用過三大框架，可是基礎仍是比較弱的，剛從爬電線杆的專業轉過來，無論怎麼說這一路仍是有人幫忙的，很是幸福～

面試了好久，最後愈來愈明白，其實真的框架是工具，能夠幫你不少，可是最重要的仍是基礎。
因此基礎很差的寶寶們，咱們之後一塊兒來補呀～～～

麼麼噠～