如何解决跨域请求的问题

首先介绍一下什么叫跨域？

访问同源的资源是被浏览器允许的，但是如果访问不同源的资源，浏览器默认是不允许的。访问不同源的资源那就是我们所说的跨域。

那为什么会有跨域的产生呢？

原来这是浏览器的一个策略----“同源策略”。

1. 什么是同源策略（Same Origin Policy）？

所谓同源策略，它是浏览器的一种最核心最基本的安全策略。它对来至不同源的文档或这脚本对当前文档的读写操作做了限制。
为什么要有这个策略，想必你已经知道，那就是因为保证用户的信息安全。

2. 假如没有同源策略

假设现在有a.com和b.com两个域，如果没有这一安全策略，那么当用户在访问a.com时，a.com的一段脚本就可以在不加载b.com的页面而随意修改或者获取b.com上面的内容。这样将会导致b.com页面的页面发生混乱，甚至信息被获取，包括服务器端发来的session。这样的话，我们的web世界将是一片混乱。也是因为浏览器的同源策略，保证来至不同源的对象不会互相干扰，保证了我们访问页面最基本的安全。

重点是我们有跨域请求数据的需要时，如何解决这个问题呢？（下面介绍两种方法（本文重点））：

第一种方法：jquery 的jsonp

javascript代码：

<script>
    $.ajax({
        url:"http://127.0.0.1:4000/kuayu?&callback=?",
        type:"get",
        dataType:"jsonp",
        jsonpCallback:"hello",
        success:function (data) {
            console.log("Hello,"+ data.name +"！");
        }
    })
</script>

node.js代码：

router.get("/kuayu",function (req,res) {
    if(req.query.name){
        res.send(req.query.callback+'({"name":"'+req.query.name+'"})');
    }
    else{
        res.send(req.query.callback+'({"name":"user"})');
    }
});

第二种方法：利用javascript的src可跨域的特性

javascript代码：

<script>
    function hello (data) {
        console.log("Hello,"+ data.name +"!");
    }
</script>
<script src="http://127.0.0.1:4000/kuayu?name=king&callback=hello" type="text/javascript"></script>

node.js代码：

router.get("/kuayu",function (req,res) {
    if(req.query.name){
        res.send(req.query.callback+'({"name":"'+req.query.name+'"})');
    }
    else{
        res.send(req.query.callback+'({"name":"user"})');
    }
});

跨域的方法都需要服务端（后端）的配合