原生JS和PHP实现跨域数据访问

原生JS和PHP实现跨域数据访问


DATA: 2018年06月12日 17:50:32

前端:本地站点localhostHTML+原生JS
后端:在线站点www.yixzm.cnphp

前端代码

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>跨域数据访问Demo页面</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv='description' content='www.yixzm.cn'>

        <style>
            body{font-family:'Comic Sans MS',serif,sans-serif,fantasy,cursive;margin:50px;}
        </style>
    </head>
    
    <body>

        <div id="div_sql_msg"></div>
        
    </body>
</html>

<script language="Javascript" type="text/javascript">
function load_sql_msg()
{    
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            g_map_json = xmlhttp.responseText;
            console.log(g_map_json);
            document.getElementById("div_sql_msg").innerHTML = g_map_json;
        }
    }
    xmlhttp.open("GET","http://www.yixzm.cn/get/get_cross_domain_data",true);
    xmlhttp.send();
}

load_sql_msg();
</script>

后端代码

public static function get_cross_domain_data()
    {
        header("Content-Type:text/html;charset-utf-8");
        header("Access-Control-Allow-Origin: *");
        echo "<p><a href='http://www.yixzm.cn'>www.yixzm.cn</a></p><a href='mailto:dream@yixzm.cn'>Mail Me</a>";
    }
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!