跨域請求的三種解決辦法

本文轉載自查看原文 2019-04-08 11:39 1318 php 經驗錦囊/ js

第一種：jsonp的方式

<?php
    header('Content-type: application/json');
    //獲取回調函數名
    $jsoncallback = $_GET['jsoncallback'];
    //json數據
    $json_data = '{"data":[{"did":"29","deptName":"\u8f6f\u4ef6\u90e8"},
    {"did":"30","deptName":"\u8f6f\u4ef6\u90e8"},
    {"did":"31","deptName":"\u6d4b\u8bd5\u90e8"},
    {"did":"32","deptName":"\u786c\u4ef6\u90e8"},
    {"did":"33","deptName":"\u54c1\u8d28\u90e8"},
    {"did":"34","deptName":"\u786c\u4ef6\u90e8"},
    {"did":"35","deptName":"\u5236\u9020\u4e2d\u5fc3"},
    {"did":"36","deptName":"\u91c7\u8d2d\u90e8"},
    {"did":"37","deptName":"\u751f\u4ea7\u90e8"},
    {"did":"38","deptName":"\u603b\u7ecf\u529e"},
    {"did":"39","deptName":"\u9500\u552e\u90e8"},
    {"did":"40","deptName":"\u8d22\u52a1\u90e8"},
    {"did":"41","deptName":"\u4f01\u5212\u90e8"},
    {"did":"42","deptName":"\u8bbe\u8ba1\u90e8"},
    {"did":"43","deptName":"\u4eba\u8d44\u90e8"},
    {"did":"44","deptName":"\u884c\u653f\u90e8"},
    {"did":"45","deptName":"\u4eba\u4e8b\u90e8"},
    {"did":"46","deptName":"\u7ef4\u4fee\u90e8"},
    {"did":"47","deptName":"\u4ed3\u50a8\u90e8"}]}';
    //輸出jsonp格式的數據
    echo $jsoncallback . "(" . $json_data . ")";
?>

第二種：在后端添加允許跨域的請求頭

<?php
    // 允許 com.qq 發起的跨域請求
    //header("Access-Control-Allow-Origin: com.qq"); 
    // 允許 所有 發起的跨域請求
    header("Access-Control-Allow-Origin: *");
    echo '{"data":[{"did":"29","deptName":"\u8f6f\u4ef6\u90e8"},
    {"did":"30","deptName":"\u8f6f\u4ef6\u90e8"},
    {"did":"31","deptName":"\u6d4b\u8bd5\u90e8"},
    {"did":"32","deptName":"\u786c\u4ef6\u90e8"},
    {"did":"33","deptName":"\u54c1\u8d28\u90e8"},
    {"did":"34","deptName":"\u786c\u4ef6\u90e8"},
    {"did":"35","deptName":"\u5236\u9020\u4e2d\u5fc3"},
    {"did":"36","deptName":"\u91c7\u8d2d\u90e8"},
    {"did":"37","deptName":"\u751f\u4ea7\u90e8"},
    {"did":"38","deptName":"\u603b\u7ecf\u529e"},
    {"did":"39","deptName":"\u9500\u552e\u90e8"},
    {"did":"40","deptName":"\u8d22\u52a1\u90e8"},
    {"did":"41","deptName":"\u4f01\u5212\u90e8"},
    {"did":"42","deptName":"\u8bbe\u8ba1\u90e8"},
    {"did":"43","deptName":"\u4eba\u8d44\u90e8"},
    {"did":"44","deptName":"\u884c\u653f\u90e8"},
    {"did":"45","deptName":"\u4eba\u4e8b\u90e8"},
    {"did":"46","deptName":"\u7ef4\u4fee\u90e8"},
    {"did":"47","deptName":"\u4ed3\u50a8\u90e8"}]}';
?>

第三種：代理請求，由后端去訪問要跨域的請求的內容並返回，然后頁面訪問本地后端

<?php
    $url='http://192.168.192.130/test2.php';

    $html= file_get_contents($url);
    
    echo $html;
?>

頁面調用方式：

<!DOCTYPE html>
<html>
    <head id="head">
        <meta charset="UTF-8">
        <title></title>
        <!--第一種，需要在后端提供寫js的回調函數,jsonp方式-->
        <!--<script>
            function callbackFunction(result){
                alert(result.data[0].deptName);
            }
        </script>
        <script type="text/javascript" src="http://192.168.192.130/test.php?jsoncallback=callbackFunction"></script>-->
        
        <!--第二種，在后端添加，允許跨域請求的請求頭-->
        <!--// 允許 ityangs.net 發起的跨域請求
            //header("Access-Control-Allow-Origin: ityangs.net"); 
            // 允許 ityangs.net 發起的跨域請求
            header("Access-Control-Allow-Origin: *");-->
            
        <!--第三種，由后端抓取要跨域的請求的內容，然后頁面訪問本地后端-->
        
    </head>
    <body>
        <script>
            var xmlhttp;
            if (window.XMLHttpRequest){
                // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行的代碼
                xmlhttp = new XMLHttpRequest();
             }else{    
                //IE6, IE5 瀏覽器執行的代碼
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var obj = JSON.parse(xmlhttp.responseText);
                    alert(xmlhttp.responseText);
                }
            }
            //GET方式訪問,true為異步，false為異步
            xmlhttp.open("GET","http://192.168.192.130/test2.php",false);
            xmlhttp.send();
        </script>
    
    </body>
    
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ajax跨域請求COOKIE無法帶上的解決辦法 ajax跨域請求問題及解決辦法總結點擊頁面跳轉解決辦法/跨域請求，JSONP extjs 跨域請求解決辦法跨域請求,關於后端session會話丟失的解決辦法關於CSRF跨域請求偽造的解決辦法 Ajax跨域請求COOKIE無法帶上的解決辦法跨域問題：解決跨域的三種方案解決跨域的三種方案 Django - 解決跨域的三種方式