web跨域问题

跨域请求的原因：

由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容。

---

跨域的场景：

一、域名不同（www.csdn.net和www.baidu.com即为不同域名）

二、二级域名不同，子域名不同（www.csdn.net/postedit 和 www.csdn/nav）

三、端口不同、协议不同（http://www.csdn和https://www.csdn.net---www.csdn.com:8080和www.csdn.com:6666）

---

跨域的方法有很多种，这里着重介绍CORS方法和JsonP方法

纯后端方式：CORS

CORS是w3c标准方式，通过在web服务器端设置响应头的的属性来达到解决跨域的目的

这个属性为：Accesss-Control-Allow 属性值设置为需要跨域访问的网页地址。

例如：res.writeHead(200,{"Access-Control-Allow-Origin":"www.csdn.net"})

---

前后端结合：JsonP

网页的同源策略限制我们不能直接通过AJAX访问不同域的内容，但是却可以通过“src”这个属性来访问不同域下的资源。JsonP就是利用这个特点来解决跨域问题。

1、客户端的代码

  //设置按钮添加点击事件
        $("<button></button>").appendTo("body").on("click",clickHandler).text("跨域")


        function clickHandler(e) {
            //动态添加script属性，并在url中以参数形式把返回结果的执行函数名发送给服务器
            $("<script src='http://10.9.xx.244:5005?callBack=getData'><\/script>").appendTo("head");
        }
        //获取响应结果后的处理函数
        function getData(obj) {

                console.log(obj)

        }

2、需要跨域访问的服务器代码（这里是用的node.js作为服务端）

var http=require("http");
var queryString=require("querystring");

var server=http.createServer(function (req,res) {
        var data=""
    req.on("data",function (d) {
        console.log(d)
            data+=d;
    })

    req.on("end",function () {
       var obj= queryString.parse(data)

            //截取url中携带的回调函数名
        var fn= req.url.split("?")[1].split("=")[1]

        var obj={a:11,b:14}
        console.log(fn)
        res.writeHead(200,{"Content-Type":"text/plane","Access-Control-Allow-Origin":"*"})
            //回调函数并将数据作为参数发送过去
        res.write( fn+"("+JSON.stringify(obj)+")");
        res.end()

    })
})

server.listen(5005,"10.9.xx.244",function () {

    console.log("start listen ....")
});