前端跨域請求解決方案

JS實作跨域的方式及原理:

JS實作跨域的方式及原理:

個人價值觀:

我們現在不談技術,不談bug,就談人生價值觀,從小我就喜歡學習鑽研一些東西,将機車拆掉(肯定是裝不起來的),将冰箱錘爛(目的是向看看裡面到底是什麼組成的),到了大學,不知道怎麼滴就不愛學習了,到處亂逛,期末排名成績一把索到了倒數可以用手指頭摳明白的名次,畢業之後危機慢慢降臨,俗話說不是不報,時候未到,用歇斯底裡的最後一口氣将自己從地獄拯救出來,接觸了前端開發,一根生死繩,慢慢地往上爬,相信終将有所收獲,緻一起死磕在前端道路上的朋友,謝謝

1.什麼叫跨域:

如果想要通路某一網站的時候需要在浏覽器輸入請求位址,此時浏覽器就會根據你請求的協定,端口,域名進 行判斷發起請求給伺服器,伺服器響應給浏覽器它想要的東西

這是引出了一個名詞:同源政策,浏覽器出于安全考慮發明出來的,防止其他惡意攻擊,如果請求的協定,端口,域名都相等的話,那麼就屬于同源否則就是跨域請求,例如

說句人話:

同源:協定,端口 ,域名都相等

跨域:協定,端口 ,域名有一個不相等就叫跨域

如：http://www.example.com/detail.html 與以下位址對比

對比位址 是否同源 原因

http://api.example.com/detail.html 不同源 域名不同

https://www.example.com/detail.html 不同源 協定不同

http://www.example.com:8080/detail.html 不同源 端口不同

http://api.example.com:8080/detail.html 不同源 域名、端口不同

https://api.example.com/detail.html 不同源 協定、域名不同

https://www.example.com:8080/detail.html不同源 端口、協定不同

http://www.example.com/other.html同源 隻是目錄不同

案例: 跨域報錯

//建立一個局部請求對象
  var xhr=new XMLHttpRequest();
  //設定請求行get的方式,通過拼接url的方式發起請求
  xhr.open('get','http://api.douban.com/v2/movie/top250');
    //get不需要設定請求頭
    xhr.send();
    //注冊監聽狀态
    xhr.function(){
       		 log(this.responseText);
    }
           

2.研究如何解決跨域:

1.jsonp 可以解決跨域問題:

function res(data){
        //拿到響應體
        console.log(data)
    }
<script src='http://api.douban.com/v2/movie/top250?callback=res'></script>
           

2.伺服器代理方式解決跨域問題例如php方式

使用伺服器端代理的方式:
 html:發起請求
 php拿到位址通路接口,并處理資料傳回給html頁面
<?php
header('Access-Control-Allow-Origin:*');
$result=file_get_contents('http://api.douban.com/v2/movie/top250');
echo $result;
?>


  使用伺服器端代理的方式:
  html:發起請求
  php拿到位址通路接口,并處理資料傳回給html頁面
           

3.在伺服器端使用:cors : Cross Origin Resource Share，跨域資源共享

document.getElementById('btn').onclick = function () {
    //試一下用ajax的方式可不可以請求.
    //不允許ajax跨域通路
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://www.lq.com/vue/day01/vue01/test.php');
    xhr.send();
    xhr.onload = function () {
        console.log(xhr.responseText);
    }
}

<?php
header('Access-Control-Allow-Origin:*');
echo "123";
?>
           

總結: 根據接口條件使用不同的擷取跨域請求資料,靈活使用,相信自己享受技術