为了账号安全,请及时绑定邮箱和手机立即绑定

无法跨域问题

源码下下来仍然无法跨域,老师有解决方法吗

正在回答

1 回答

从外界获取的代理很容易失效,为解决跨域问题,可以自行创建一个代理,此处使用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);


?>


1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQM Web App –列车时刻表
  • 参与学习       38491    人
  • 解答问题       188    个

主流移动WEB应用程序开发框架,可以开发简单的Web App应用

进入课程

无法跨域问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信