前端跨域問題的解決方案

時間 2019-11-18

標籤前端問題解決方案简体版

原文原文鏈接

跨域是瀏覽器的一種安全策略，是瀏覽器自身作的限制，不容許用戶訪問不一樣域名或端口或協議的網站數據。javascript

只有域名（主域名【一級域名】和二級域名）、端口號、協議徹底相同的時候，才容許通訊。php

# 那麼，如何解決跨域問題？html

* 1：動態建立script標籤前端

　　　- 使用jQuery的ajax請求時，當參數傳入的是jsonp，使用的就是這種方法java

1 <script>
2     function fuc(a){
3         console.log(a.name);
4     }
5 </script>
6 <script src="http://api.study.com/02_jsonp.php?callback=fuc"></script>

<?php
    header('Content-Type:text/html;charset=utf-8');

    /*處理業務邏輯  返回數據給第三方過的的接口*/

    $callback = $_GET['callback'];

    $json = '{"name":"cxh","age":"18"}';

    echo $callback.'('.$json.')';  //給接收的函數一個參數，並返回到頁面
?>

* 2：使用HTML5 的 postMessagejquery

1 <iframe id="ifr" src="b.com/index.html"></iframe>
2 <script type="text/javascript">
3 window.onload = function() {
4     var ifr = document.getElementById('ifr');
5     var targetOrigin = 'http://b.com';  // 若寫成'http://b.com/c/proxy.html'效果同樣
6                                         // 若寫成'http://c.com'就不會執行postMessage了
7     ifr.contentWindow.postMessage('I was there!', targetOrigin);
8 };
9 </script>

 1 <script type="text/javascript">
 2     window.addEventListener('message', function(event){
 3         // 經過origin屬性判斷消息來源地址
 4         if (event.origin == 'http://a.com') {
 5             alert(event.data);    // 彈出"I was there!"
 6             alert(event.source);  // 對a.com、index.html中window對象的引用
 7                                   // 但因爲同源策略，這裏event.source不能夠訪問window對象
 8         }
 9     }, false);
10 </script>

* 3：jsonpnginx

原理：前端先將一個實現定義好的函數名放給服務端，服務端接受這個函數，而後拼接 ‘（參數）’返回到瀏覽器。ajax

他是一個先後端配合的結果。json

可是有些網站不是公開的數據，並不知道他的已經定義好的函數名是什麼後端

 1 <script src="js/jquery.min.js"></script>
 2 <script>
 3     $.ajax({
 4         type:'get',
 5         url:'http://api.study.com/jquery_jsonp.php',
 6         dataType:'jsonp',
 7         success:function(data){
 8             console.log(data);
 9         }
10     });
11 </script>

* 4：頂級域名相同時的跨域問題，能夠使用這些方式

　　（1）document.domain + iframe

"http://aaa.kuayu.com/" 中的文件能夠在JavaScript中，使用top關鍵字訪問到它的上一級元素（也就是引入他的b文件）中的元素。此時頁面顯示的效果是b文件中的p段落變爲黃色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     aaaaaaaaaaa
14 </body>
15 </html>
16 <script>
17     document.domain = 'kuayu.com';
18     top.document.getElementsByTagName('p')[0].style.color = 'yellow';
19 </script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>    
 6     <style>
 7         body {
 8             color: green;
 9         }
10     </style>
11 </head>
12 <body>
13 <p>bbbbbbbbbbbb</p>
14 
15  <iframe src="http://aaa.kuayu.com/" frameborder="0"></iframe>
16     
17 </body>
18 </html>
19 
20 <script>
21     
22     document.domain = 'kuayu.com';
23 </script>

　　（2）domain.name = 頂級域名

　　（3）document.name + iframe

實現思路：給a頁面添加一個全局屬性name；

在b頁面引入a頁面，而且在iframe加載完畢以後修改他的url，是他引入一個本地的頁面。

此時在b頁面經過iframe.contentWindow.name獲取的就是a頁面的數據

 1 <script>
 2 var iframe = document.querySelector('iframe');
 3 iframe.contentWindow.name = 111;
 4 iframe.onload = function(){
 5     this.src = 'c.html';
 6     this.onload = null;
 7 }
 8 
 9 setTimeout(function(){
10         var name = iframe.contentWindow.name;
11     alert(name);
12 },200);
13 
14 
15 </script>

1 <script>
2 window.name='a頁面的數據'
3 </script>

　　（4）document.hash + iframe

　　　　hash也就是錨點

　　　　能夠經過hash傳遞數據

1 <body>
2 <p>bbbbbbbbbbbb</p>
3 
4  <iframe src="http://aaa.kuayu.com/#name=hahaha" frameborder="0"></iframe>
5   //  此時hash值name=hahaha 能夠傳遞到a頁面，也就是在按頁面能夠取到b頁面傳遞給她的值。使用這是種方式能夠實現數據的跨域傳遞。
6 </body>

　　（5）window.postMessage()

5：在服務器實現跨域的方法（反向代理）

以Apache的配置爲例

1：修改Apache的配置文件
    #LoadModule proxy_module modules/mod_proxy.so
      LoadModule proxy_http_module modules/mod_proxy_http.so
      放開註釋

2： 修改httpd-vhosts.conf文件，給本身的項目 添加兩行
    ProxyRequests Off  開啓反向代理
    ProxyPass /api http://api.botue.com  起一個別名

6：服務端實現反向代理（與服務器不一樣）

1 <?php
2     header('Content-Type : application/json');    
3 
4     $result = file_get_contents( '跨域的地址' );
5 
6     echo $result;
7 ?>

在頁面使用XMLHTTPRequest發送請求，能夠獲取php後臺返回出去的跨域的數據