跨域请求的三种解决

第一种：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
    // 允许 ityangs.net 发起的跨域请求
    //header("Access-Control-Allow-Origin: ityangs.net");
    // 允许 ityangs.net 发起的跨域请求
    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>

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

时间： 2024-10-10 20:05:32

跨域请求的三种解决的相关文章

jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

服务器端解决跨域问题的三种方法

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: - ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域. - ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域. 解决此类问题的方法很多,有需要客户端和服务端都要更改的,例如jsonp,iframe等等:有只需要客户端更改的,这种情况只能出现在hybrid app开发中,即通过调用native方法来进行网络请求:有只需要服务端配置的,

实践解决跨域问题的三种方式剖析

最近在做我星际schub网站的时候,遇到了跨域问题,我先把后端node部署在了服务器上,然后在本地localhost测试,出现了问题: 浏览器都提示我们使用这个header头: 解决办法: 1. CORS 服务器设置响应头: response.setHeader("Access-Control-Allow-Origin", "*") (这样可能引起CSRF攻击,一般设置成对应的域名就行, response.setHeader("Access-Control

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

项目中经常遇到的跨域请求的几种方法

什么是跨域 JSONP proxy代理 cors xdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求.在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. 如

跨域请求的概念和解决办法

相关概念同源是指相同的协议.域名.端口,三者都相同才属于同源. 同源策略浏览器处于安全考虑,在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本,站外其他来源的脚本同页面的交互则被严格限制. 跨域由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域跨域资源共享(Cross Origin Resource Sharing,CORS)是一个解决跨域问题的好办法,从而可以使用XHR从不同的源加载数据和资源. 看看哪些情况下属于跨域访问: 解决办法

Ajax跨域问题的两种解决方法

浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: header('Access-Control-Allow-Origin:*') 使用如下标头可以接受指定网站请求: header('Access-Control-Allow-Origin:http://www.abc.com') 所以,服务器写法: header('Access-Control-Al

实现跨域请求的4种方法

模拟服务器端的PHP文件: service: <?php//允许访问header('Access-Control-Allow-Origin:*');@$callback=$_GET['callback'];//创建数据$userInfo = array('id'=>1,'username'=>'Scott Jeremy','email'=>'[email protected]');//编译成JSON$result = json_encode($userInfo);echo $cal

跨域请求的3种方式

视频教程跨域请求的方式:3种 1.后台代理 2.jsonp 3.HTML5中的XHR2 需要前端会的方法是后两种. 2.jsonp使用方法:只支持get方式 $.ajax({dataType:"jsonp",jsonp:"callback",success:...,error:...});//前台,修改数据类型,定义jsonp属性和参数名,等待后台调用 var request=$_GET("callback");//后台,接收前台定义好的参数名