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>

时间: 2024-12-28 15:03:27

node实现jsonp跨域的相关文章

深入浅出:了解jsonp跨域的九种方式

什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理.这就形成了“跨域”. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交2.) 资源嵌入: <link>.<script>.<img>.&l

原生jsonp跨域

<script> // jsonp跨域原生写法 var script = document.createElement('script'); script.src = 'http://192.168.7.16/kuayu/test02.php?callback=aa'; document.body.appendChild(script); //aa('后台数据') function aa(res) { alert(res.website); } </script>

JSONP跨域的原理解析

JSONP跨域的原理解析 一种脚本注入行为 在 2011年10月27日 那天写的     已经有 99238 次阅读了 感谢 参考或原文 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进

jQuery和java后台的jsonp跨域问题

Jsonp原理: ajax本身是不可以跨域的,通过产生一个script标签来实现跨域.因为script标签的src属性是没有跨域的限制的.其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问. JSONP是一种脚本注入(Script Injection)行

JQuery+ajax+jsonp 跨域访问

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子: 一.客户端 Html代码   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

【转】JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

jsonp 跨域原理详解

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在

Jsonp 跨域请求实例

关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止跨域访问的: 本机实例: http://127.0.0.1:80/index.php <script src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script type="tex