node实现jsonp跨域

Posted 我叫王自信

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了node实现jsonp跨域相关的知识,希望对你有一定的参考价值。

1. 搭建node server

 

//引入模块

var http=require("http");

var fs=require("fs");
var url = require(‘url‘);
var querystring = require(‘querystring‘);

//创建服务器
var server=http.createServer();
server.on("request",function(req,res){
    console.log(req.url.split(‘?‘)[1])
    var urlpath=url.parse(req.url).pathname;
    var qs = querystring.parse(req.url.split(‘?‘)[1]);//callback=result
    if(urlpath === ‘/jsonp‘){
                res.writeHead(200,{‘Content-Type‘:‘application/json;charset=utf-8‘});
                function isJson(obj){
                    return typeof(obj)=="object"&&Object.prototype.toString.call(obj).toLowerCase()=="[object ]"
                }
                 fs.readFile("fs.json",function(err,data){
                     if(err){console.log(err)}
                     data=JSON.parse(data);//因为data是buffer要把他变成json
                     data=JSON.stringify(data)
                     var callback = qs.callback+‘(‘+data+‘);‘;//callback:test({json})
                    res.end(callback);//res.end参数为buffer或者string
                 })
            }else{
                res.writeHead(200, {‘Content-Type‘:‘text/html;charset=utf-8‘});
                res.end(‘Hell World\n‘);
            }
});
server.listen("3000");
console.log("server running at localhost:3000");

 

 

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
    <div id="box">hahahaha</div>
    <button id="but">click it</button>
    
    <script>
        function test(data){
                            alert(data.name);
                        }
    </script>
    <script src="http://localhost:3000/jsonp?callback=test"></script>

</body>
</html>













































以上是关于node实现jsonp跨域的主要内容,如果未能解决你的问题,请参考以下文章

原生javascript里jsonp的实现原理

正确面对跨域

AJAX跨域调用相关知识-CORS和JSONP

ajax跨域方法

WeX5 - AJAX跨域调用相关知识-CORS和JSONP

跨域解决方案