1. 程式人生 > >node實現jsonp跨域

node實現jsonp跨域

text con 跨域 require test eof file jsonp跨域 data

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跨域