zoukankan html css js c++ java

跨域请求的三种解决办法

第一种：jsonp的方式

<?php
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = $_GET['jsoncallback'];
    //json数据
    $json_data = '{"data":[{"did":"29","deptName":"u8f6fu4ef6u90e8"},
    {"did":"30","deptName":"u8f6fu4ef6u90e8"},
    {"did":"31","deptName":"u6d4bu8bd5u90e8"},
    {"did":"32","deptName":"u786cu4ef6u90e8"},
    {"did":"33","deptName":"u54c1u8d28u90e8"},
    {"did":"34","deptName":"u786cu4ef6u90e8"},
    {"did":"35","deptName":"u5236u9020u4e2du5fc3"},
    {"did":"36","deptName":"u91c7u8d2du90e8"},
    {"did":"37","deptName":"u751fu4ea7u90e8"},
    {"did":"38","deptName":"u603bu7ecfu529e"},
    {"did":"39","deptName":"u9500u552eu90e8"},
    {"did":"40","deptName":"u8d22u52a1u90e8"},
    {"did":"41","deptName":"u4f01u5212u90e8"},
    {"did":"42","deptName":"u8bbeu8ba1u90e8"},
    {"did":"43","deptName":"u4ebau8d44u90e8"},
    {"did":"44","deptName":"u884cu653fu90e8"},
    {"did":"45","deptName":"u4ebau4e8bu90e8"},
    {"did":"46","deptName":"u7ef4u4feeu90e8"},
    {"did":"47","deptName":"u4ed3u50a8u90e8"}]}';
    //输出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":"u8f6fu4ef6u90e8"},
    {"did":"30","deptName":"u8f6fu4ef6u90e8"},
    {"did":"31","deptName":"u6d4bu8bd5u90e8"},
    {"did":"32","deptName":"u786cu4ef6u90e8"},
    {"did":"33","deptName":"u54c1u8d28u90e8"},
    {"did":"34","deptName":"u786cu4ef6u90e8"},
    {"did":"35","deptName":"u5236u9020u4e2du5fc3"},
    {"did":"36","deptName":"u91c7u8d2du90e8"},
    {"did":"37","deptName":"u751fu4ea7u90e8"},
    {"did":"38","deptName":"u603bu7ecfu529e"},
    {"did":"39","deptName":"u9500u552eu90e8"},
    {"did":"40","deptName":"u8d22u52a1u90e8"},
    {"did":"41","deptName":"u4f01u5212u90e8"},
    {"did":"42","deptName":"u8bbeu8ba1u90e8"},
    {"did":"43","deptName":"u4ebau8d44u90e8"},
    {"did":"44","deptName":"u884cu653fu90e8"},
    {"did":"45","deptName":"u4ebau4e8bu90e8"},
    {"did":"46","deptName":"u7ef4u4feeu90e8"},
    {"did":"47","deptName":"u4ed3u50a8u90e8"}]}';
?>

第三种：代理请求，由后端去访问要跨域的请求的内容并返回，然后页面访问本地后端

<?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>

查看全文

相关阅读:
跨域请求携带cookie
vue keep-alive
关于js replace 第二个参数时函数时，函数参数解析
 前端开发规范之CSS
git命令集合(正在完善中...)
怎么写jQuery的插件
 git命令集合
 GitHub创建静态网站预览方法
 正则表达式
 各种浏览器全屏模式的方法、属性和事件介绍

原文地址：https://www.cnblogs.com/makalochen/p/10669586.html