无法跨域问题
源码下下来仍然无法跨域,老师有解决方法吗
源码下下来仍然无法跨域,老师有解决方法吗
2015-10-26
从外界获取的代理很容易失效,为解决跨域问题,可以自行创建一个代理,此处使用php创建一个代理,保存在php_proxy_simple.php中,在客户端调用web服务时,向代理服务器提交一个URL地址,代理服务器使用CURL方法向实际的web服务发送请求,并将返回的XML数据发送给客户端。客户端对收到的XML数据再行解析。
index.html文件中的script代码如下所示:主要修改了代理服务器地址,以及$.get方法中的参数,index.html和php_proxy_simple.php文件都在train文件夹中,train文件夹在apache服务器的webapps
\projects文件夹中。可根据实际部署的位置自行调整urlProxy中的URL地址。
<script> var urlProxy = "http://localhost:8080/projects/train/php_proxy_simple.php?ws_path="; //跨域中转 var url1 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID="; var url2 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID="; var url3 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID="; var isbind = 0; //获取车次列表 var getTrainList = function () { //数据校验 if ($("#search-no").val() || ($("#search-begin").val() && $("#search-end").val())) { var searchButton = $(this); searchButton.button("option", "disabled", true); $.mobile.loading("show"); //var _data = {}; var _url = url1; if (!$("#search-no").val()) { //_data.StartStation = $("#search-begin").val(); //_data.ArriveStation = $("#search-end").val(); _url +="&StartStation=" + $("#search-begin").val()+"&ArriveStation=" + $("#search-end").val(); } else { //_data.TrainCode = $("#search-no").val(); _url = url2; _url += "&TrainCode=" + $("#search-no").val(); } $.get(urlProxy + encodeURIComponent(_url), function (data) { $("#list").html(""); var list = $("#list"); var timeTables = $(data).find("TimeTable"); var _arr = []; timeTables.each(function (index, obj) { var i = index; if (i > 10) return false; //只载入前10条 var that = $(this); if (that.find("FirstStation").text() == "数据没有被发现") { alert("数据没有被发现!"); return false; } _arr.push('<li><a href="#" data-no="' + that.find("TrainCode").text() + '">' + '<h2>' + that.find("TrainCode").text() + '次</h2>' + '<p>' + that.find("FirstStation").text() + ' - ' + that.find("LastStation").text() + '</p>' + '<p>用时:' + that.find("UseDate").text() + '</p>' + '<p class="ui-li-aside">' + that.find("StartTime").text() + ' 开</p>' + '</a></li>'); }); if (_arr.length > 0) { list.html(_arr.join("")); list.listview("refresh"); } $.mobile.loading("hide"); searchButton.button("option", "disabled", false); }); } else { alert("请输入发车站和终点站或输入车次!"); } }; var isAjax=false //获取详情 var getInfoByTrainCode = function () { $.mobile.loading("show"); var trainCode = $(this).attr("data-no"); var _url=url3; if(isAjax) return; isAjax=true _url += "&TrainCode=" + trainCode; $.get(urlProxy + encodeURIComponent(_url), function (data) { isAjax=false $("#detail").find(".ui-content h2").html(trainCode + "次"); var tbody = $("#detail").find(".ui-content tbody"); tbody.html(""); $(data).find("TrainDetailInfo").each(function (index, obj) { var tr = $("<tr></tr>"); var that = $(this); tr.html('<td>' + that.find("TrainStation").text() + '</td>' + '<td>' + that.find("ArriveTime").text() + '</td>' + '<td>' + that.find("StartTime").text() + '</td>'); tbody.append(tr); }); $.mobile.loading("hide"); $.mobile.changePage("#detail"); }); }; //绑定事件 var bindEvent = function () { $("#search-submit").on("click", getTrainList); $("#list").on("click", "a", getInfoByTrainCode); }; $(document).on("pageshow", "#index", function () { if (isbind) return isbind = 1; bindEvent(); }); </script>
php_proxy_simple.php文件中的内容如下所示:
<?php // PHP Proxy example for Web services. // Responds to both HTTP GET and POST requests // Get the REST call path from the AJAX application // Is it a POST or a GET? $url = ($_POST['ws_path']) ? $_POST['ws_path'] : $_GET['ws_path']; // Open the Curl session $session = curl_init(); curl_setopt($session, CURLOPT_URL, $url); //echo $session; // If it's a POST, put the POST data in the body if ($_POST['yws_path']) { $postvars = ''; while ($element = current($_POST)) { $postvars .= urlencode(key($_POST)).'='.urlencode($element).'&'; next($_POST); } curl_setopt ($session, CURLOPT_POST, true); curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars); } // Don't return HTTP headers. Do return the contents of the call curl_setopt($session, CURLOPT_HEADER, false); curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // Make the call $xml = curl_exec($session); echo $xml; curl_close($session); ?>
举报