同源策略及解決跨域問題

同源策略

• 瀏覽器出於安全考慮設置了同源策略。也就是說如果協議，域名和端口有一個不同的話就屬於跨域。
• 最初設計是爲了保護用戶信息的安全，防止惡意的網站竊取數據，如CRSF跨站點請求僞造。A網站在客戶端設置的cookie,B網站是拿不到的。
• 非同源請求其實是發出去了的，只不過瀏覽器拒絕接受服務器返回的結果。

解決跨域

1. JSONP: 利用 script 標籤沒有跨域限制的漏洞。通過script 標籤的src屬性指向一個需要訪問資源的地址並提供一個回調函數來接收數據。使用簡單，兼容性好，但是僅限於get請求。

    // 客戶端
    // 可動態創建script標籤，爲標籤添加onload事件，刪除script標籤
    <script src="xxx?param1=a&callback=jsonp"></script>
    <script>
    function jsonp(data) {
        console.log(data)
    }
   </script>   

   // 服務端
    const fnName = req.query.callback;
    const data = JSON.stringify({name: '張三'})
    const result = fnName + '(' + data + ')';
    res.send(result)
    
    // 在express框架下，以上代碼可直接替換
    res.jsonp({name: '張三'})

2. CROS跨域資源共享：

• 需要後端支持。
• 服務端設置響應頭 Access-Control-Allow-Origin： * 或 和請求頭origin一致的url。該屬性表示哪些域名可以訪問資源，如果設置的是通配符則表示所有的網站都可以訪問資源。也可以設置Access-Control-Allow-Methods: ‘get, post’,表明哪些請求方法可以訪問到我。

3. nginx 反向代理：將對真實服務器的請求轉移到本機服務器來避免瀏覽器的"同源策略限制"。
4. document.domain：該方式只能用於主域名相同的情況下，比如id.qq.com 和 www.qq.com。只需要給頁面添加document.domain='test.com’表示主域名相同即可。
5. postMessage:這種方式經常用於獲取嵌入頁面中的第三方頁面的消息。一個頁面發送消息，另一個頁面判斷來源並接收消息。