前端跨域原理以及跨域解决方案

URL地址： http://www.justbecoder.com:80/article/index.html
    http                                  超文本传输协议
    www.justbecoder.com                   域名
    80                                    端口号
    article/index.html                    文件目录与文件名      

假定当前在的网址是： http://www.justbecoder.com:80/，当我向以下网址发送请求时都会触发跨域
    url: https://www.justbecoder.com:80/   // 协议不同 --- 喂，老婆，我听不懂呀，你说话加密啦！
    url: http://www.baidu.com:80/          // 域名不同 --- 哎呀，菇凉认错认了，你不是我老婆
    url: http://www.justbecoder.com:8080/  // 端口不同 --- 是你老婆没错，但是你没有找对你老婆身上的门啊

// 客户端  跨域请求 --- 所在位置 http://localhost:80/index.js
$.ajax({
    // 端口号不同，引发跨域
    url: 'http://localhost:3000/user/info',
    type: 'get',
    data: {
        id: 110
    },
    success: function(msg) {
        console.log(msg)
    },
    error: function(err) {
        console.log(err)
    }
})  

// 服务器端响应 --- 以Node.js为例,服务器位置http://localhost:3000
var express = require('express');
var router = express.Router();

router.get('/user/info', function(req, res) {
    // 获取请求的参数
    // req.query.id // 当然这个参数目前是没有用滴...
    // ... 查询数据库中对应的用户info,假定当前获取的数据为
    var userInfo = {
        id: 110,
        username: '天王盖地虎',
        userimg: '/uploads/user/23456.jpg'
    };
    // 响应给客户端
    res.send(200, userInfo);
})

// 当我们向某个位置发送请求时，请求和响应要做出如下改变
客户端请求：
    <script src="http://localhost:3000/user/info?id=110" type="text/javascript"></script>
服务器端响应 -- Node.js部署的服务：
    var userInfo = {
        id: 110,
        username: '天王盖地虎',
        userimg: '/uploads/user/23456.jpg'
    };

    // 序列化 -- 格式 {"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"}
    var userInfoJsonStr = JSON. stringify(userInfo);

    // 格式 -- 'getInfo({"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"})'
    res.send(200, 'getInfo('+userInfoJsonStr+')'); 

客户端接收数据
    // 响应到的数据(浏览器 Network自行查看)，该格式下的字符串，相当于在调用一个名字为 getInfo 的函数，传递的参数为 {"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"}
    // getInfo({"id":110,"username":"天王盖地虎","userimg":"/uploads/user/23456.jpg"})

    在客户端的JS脚本中，定义对应的函数 getInfo()
    <script type="text/javascript">
        function getInfo(msg) {
            // 此处的msg就是获取响应的userInfo
            // 接下来你想干啥就干啥
        }
    </script>

$.ajax({
    // 请求的url地址
    url: 'http://localhost:3000/user/info',
    // 发送数据方式
    type: 'get',
    // 参数
    data: {
        id: 110
    },
    // 请求成功时的callback
    success: function(msg) {
        // 你想干啥就干啥
    },
    // 预期服务器返回的数据类型
    dataType: 'jsonp',
    // 指定定义回调函数名的参数名,若不指定默认参数名为callback
    jsonp: 'callback',
    // 指定回调函数名,若不指定默认为系统自动生成
    // jsonpCallback: 'getInfo'
})