浏览器跨域问题小结

一、问题由来：

    安全性，其实跨域只有浏览器有安全检查，不用浏览器自己写个web-client调用服务器端，是没有任何问题的。

    只有浏览器（特别是谷歌）会检查安全限制，也就是被请求端响应头是否Response.AddHeader("Access-Control-Allow-Origin", "*")

二、解决办法：

  1、谷歌浏览器快捷方式加参数，禁用这个检查：

C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --disable-AAA-web-security --user-data-dir=C:\GuGeData

--disable-web-security --user-data-dir=C:\\GugeData

   2：请求端用$.getJSON或者jsonp，被请求端（服务器）需要加上响应头：

效果图：

请求端（浏览器、客户端）代码：

function callGetJson() {
            var s = "", sUrl = "http://localhost:7419/api/datetime.ashx?method=now", data = { p1: "01", p2: "02" }, txt = document.getElementById("txt_info");
            if (document.getElementById("chk_kuayu").checked) sUrl += "&kuayu=1"; else sUrl += "&kuayu=0";
            try {
                $.getJSON(sUrl, data, function (result) {
                    alert(s = "$.getJSON-返回值：" + result);
                    txt.append(s + "\r\n");
                });
            } catch (x) {
                alert(x.message);
            }
        }

 $.getJSON本质上是get访问，带上的post参数{ p1: "01", p2: "02" }，接收端都变成了这样的：

http://localhost:7419/api/datetime.ashx?method=now&kuayu=0&p1=01&p2=02

被请求端（海宏检测线服务器端）：

context.Response.AddHeader("Access-Control-Allow-Origin", "*"); //响应：告诉调用者，允许所有的跨域调用，不限制
context.Response.AddHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");   //允许get这类jsonp调用

测试过下面的$.ajax用jsonp的，感觉效果不理想：

function callAjax() {
            var s = "", sUrl = "http://localhost:7419/api/datetime.ashx?method=now", data = {}, txt = document.getElementById("txt_info");
            if (document.getElementById("chk_kuayu").checked) sUrl += "&kuayu=1"; else sUrl += "&kuayu=0";
            try {
                $.ajax({
                    async: false,
                    url: sUrl,      //提交 请求数据   
                    data: data,     //数据
                    contentType: "application/json", //必须有  
                    dataType: 'JSON', //"jsonp"
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
                        //xhr.setRequestHeader("Origin", "*");
                        //XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "http://192.168.88.66/');
                        //XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "*");
                        //console.log(xhr.getAllResponseHeaders());
                        var h = new Headers();
                        h.append("Access-Control-Allow-Origin", "*");
                        console.log(xhr);
                    },
                    success: function (result) {
                        alert(s = "$.ajax-success-返回值：" + result);
                        txt.append(s + "\r\n");
                    },
                    error: function (result) {
                        alert(s = "$.ajax-error-错误值：" + JSON.stringify(result));
                        txt.append(s + "\r\n");
                    }
                });
            } catch (x) {
                alert(x.message);
            }
        }