跨域問題，及解決方案

1.同源策略

    同源策略即，請求URL地址中的協議，域名，端口都相同，同源策略是瀏覽器的一種安全策略，主要是爲了保證瀏覽器的安全性，同源策略下，瀏覽器不容許Ajax跨域獲取服務器數據

 

2.什麼是跨域問題呢？

  協議(http,https),域名(api，www....),端口(8080，5000，3000，80)三者之一不一樣就會形成跨域問題，

 

3.跨域是會報什麼樣的錯呢？

 

4.如何解決跨域問題？

經常使用 的解決方案是jsonp，jsonp只能實現get的跨域，實現post的跨域須要服務器端開放相應的權限

 

全部的靜態標籤是不存在任何跨域問題的，因此，jsonp就能夠藉助src來解決跨域問題

 

5.jsonp封裝

 

<script>
    jsonp({
      url: 'http://localhost:3000',
      data: ' ',
      success: function(data){
        console.log(data);
      }
    });

    function jsonp(options){
        //將用戶經過命名空間定義的函數掛載到全局
        window.getData = options.success;
        //處理字符串拼接
        options.url = options.url + '?callback=getData';
       
        //建立一個script標籤
        let script = document.createElement('script');
        script.src = options.url;
        document.body.appendChild(script);
     }
</script>

 

 

 

注：若是有多個跨域，服務器和客戶端要對多個方法，很麻煩！