解决跨域问题的方法 --- JSONP

        JOSNP全称json with padding，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

        在前端中可以跨域的标签有以下几种：

    <img src="" alt="">
    <script src=""></script>
    <a href=""></a>
    <link href="">

router.js代码：

var fs=require("fs")
var url=require("url")
var querysting=require("querystring")
var mime=require("mime")
let urls={}
var http=require("http")

let router=function(req,res){
	//这个函数每次用户访问时运行
	let pathname=url.parse(req.url).pathname
	fs.readFile(router.basepath+pathname,(err,data)=>{
		if(!err){
			res.setHeader("content-Type",mime.getType(pathname))
			res.end(data)
		}else{
			if(!urls[pathname]){res.end("404 not found-mymvc")}
			else{urls[pathname](req,res)}
		}
	})
}
router.static=function(path){
	this.basepath=path
}

router.get=function(url,cb){
	urls[url]=cb
}
router.basepath=__dirname+"/public"
http.createServer(router).listen(8081)
module.exports=router;

服务器端的index.js代码：

var router = require("./router.js")
var url = require("url")
var querysting = require("querystring")

router.get("/ajax",function(req,res) {
    var obj = {name:"xiaozhang",age:21,books:["book1","book2"]}
    var str = JSON.stringify(obj)
    var query1 = url.parse(req.url).query
    var queryobj = querysting.parse(query1)
    res.end(`${queryobj.callback}(${str})`)
})

客户端index.html代码：

    <button onclick="fn()">JSONP请求</button>

    <script>

        function fn() {
            var name = "hq"+new Date().getTime()
            window[name] = function(arg) {
                console.log(arg);
            }
            var script1 = document.createElement("script")
            script1.src = `http://192.168.0.114:8081/ajax?callback=${name}`
            document.body.append(script1)
        }

    </script>

点击按钮之后的结果：

对JSONP的理解：

1.前端网页中用ajax请求跨域服务器的网址  会报跨域错误；而用script标签的src属性去请求跨域服务器的网址， 不会报跨域错误,但是 会直接把请求过来的编码用v8引擎去运行

2. 我们可以在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的:

' fn({"name":"karen"}) ' ；前端可以用script标签的src属性去请求这个网址,请求完毕以后 v8引擎就会直接运行这个编码 去调用fn函数,所以我们必须提前创建这个函数
    
 3.函数的名称问题:  前端可以通过querystring把函数名以参数的形式发送给后端