Node.js使用JSONP接口的具体用法

 更新时间:2024年03月11日 15:15:12   作者:爱健身的小刘同学  
JSONP是一个跨域解决方案,本文主要介绍了Node.js使用JSONP接口的具体用法,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

1. 概念及特点

概念:浏览器通过 <script> 标签的 src 属性,请求服务器上的数据,同时服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP

特点:  ①   JSONP 不属于真正的 Ajax 请求,因为它没有使用 XMLHttpRequest 这个对象

②   JSONP 仅支持 GET 请求,不支持 POST、PUT、DELETE 等请求

2. 创建 JSONP 接口的注意事项

如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置 CORS 中间件之前声明 JSONP 的接口。否者 JSONP 接口会被处理成开启了 CORS 的接口

// 优先创建 JSONP 接口    [这个接口不会被处理成 CORS 接口]
app.get('/api/jsonp', (req, res) =&gt; { })

// 配置 CORS 中间件 [后续的所有接口都会被处理成 CORS 接口]
app.use(cors())

// 这是一个开启了 CORS 的接口
app.get('/api/get', (req, res) =&gt; { })

3. 实现 JSONP 接口的步骤

①   获取客户端发送过来的回调函数的名字

②   得到要通过 JSONP 形式发送给客户端的数据

③   根据前两步得到的数据,拼接出一个函数调用的字符串

④   把上一步拼接得到的字符串,响应给客户端的 <script> 标签进行解析执行

4. 实现 JSONP 接口的具体代码

app.get('/api/jsonp', (req, res) => {
    // 1. 
    const funName = req.query.callback
    // 2. 
    const data = { name: 'zj', age: '22' }
    // 3. 
    const scriptStr = `${funName}(${JSON.stringify(data)})`
    // 4. 
    res.send(scriptStr)
})

5. 在网页中使用 JQuery 发起 JSONP 请求

调用 $.ajax()函数,提供 JSONP 的配置选项,从而发起 JSONP 请求

$('#btnJSONP').on('click', () => {
    $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1/api/jsonp',
        dataType: 'jsonp', // 表示要发起的是 JSONP 请求
        success: (res) => {
            console.log(res)
        }
    })
})

使用JSONP格式实现跨域

实现步骤

  •  动态创建一个script标签
  •  src指向接口的地址
  •  定义一个函数和后端调用的函数名一样

实现代码 -- 在nodejs中使用http内置模块起一个服务,端口号为3000

const url = require('url')

const http = require('http')

const server = http.createServer((req,res)=>{
    if(req.url === '/favicon.ico') return  //图标忽略 --- 图标地址也会请求后台服务
    const {query,pathname} = url.parse(req.url,true)  //若加上true这个参数,query字符串参数会自动转成对象格式

    //设置头部信息 状态为200 内容为JSON格式  如果要返回html片段这设置为text/html
    res.writeHead(200, { 'Content-Type': 'application/json' });

    if(pathname == '/api/data'){
        //定义对象,返回给前端的   数据
        const obj = {code:200,message:'jsonp形式返回给前端'}
        //返回一个JSON调用的函数
        res.end(`toFront(${JSON.stringify(obj)})`)
    }else{
        //简单处理了
        res.writeHead(404, { 'Content-Type': 'application/json' });
        res.end('404')

    }

   //jsonp跨域操作
   //  console.log(req.url) //获取请求除域名外的地址 例如 localhost:300/api  只获取/api
})
server.listen(3000,()=>{
    console.log("服务已启动")
})

在客户端的代码

 <script type="text/javascript">
    //jsonp跨域步骤
    //1.动态创建一个script标签
    const newscript = document.createElement('script')
    //2.src指向接口的地址
    newscript.src = 'http://localhost:3000/api/data'
    document.body.appendChild(newscript  )
    //3.定义一个函数和后端调用的函数名一样
    function toFront(res){
      //后台返回的数据  这个函数是后台服务调用过来的
      console.log(res) 
    }
  </script>

执行的结果 ,返回一个JSON格式的文档

到此这篇关于Node.js使用JSONP接口的具体用法的文章就介绍到这了,更多相关Node.js JSONP接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Nodejs环境实现socket通信过程解析

    Nodejs环境实现socket通信过程解析

    这篇文章主要介绍了Nodejs环境实现socket通信过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 前端如何更好的展示后端返回的十万条数据

    前端如何更好的展示后端返回的十万条数据

    这篇文章主要为大家介绍了前端如何更好的展示后端返回的十万条数据,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2021-11-11
  • NPM相关命令之报错node-gyp...的解决方法

    NPM相关命令之报错node-gyp...的解决方法

    node-gyp就是为node编译c++扩展的时候使用的编译工具,下面这篇文章主要给大家介绍了关于NPM相关命令之报错node-gyp...的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • node.js中的path.dirname方法使用说明

    node.js中的path.dirname方法使用说明

    这篇文章主要介绍了node.js中的path.dirname方法使用说明,本文介绍了path.dirname的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • node中npm ERR! network ‘proxy‘ 配置问题解决

    node中npm ERR! network ‘proxy‘ 配置问题解决

    在进行npm依赖管理时,可能会遇到因网络配置不当导致的错误,如npm ERR! network proxy config is set properly,下面就来介绍一下,感兴趣的可以了解一下
    2024-09-09
  • nodejs编写bash脚本的终极方案分享

    nodejs编写bash脚本的终极方案分享

    你懂JavaScript吗?你需要写一个Shell脚本吗?那么你应该试一下Node.js,它很容易安装,而且很适合通过写Shell脚本来学习它,下面这篇文章主要给大家介绍了关于nodejs编写bash脚本的终极方案,需要的朋友可以参考下
    2021-08-08
  • 轻松创建nodejs服务器(7):阻塞操作的实现

    轻松创建nodejs服务器(7):阻塞操作的实现

    这篇文章主要介绍了轻松创建nodejs服务器(7):阻塞操作的实现,本文先是组出了代码,然后对代码一一分析,需要的朋友可以参考下
    2014-12-12
  • 深入理解Node.js中的Worker线程

    深入理解Node.js中的Worker线程

    这篇文章主要介绍了深入理解Node.js中的Worker线程,对Worker线程感兴趣的同学,一定要看一下
    2021-04-04
  • Node.js操作MySQL8.0数据库无法连接的问题解决

    Node.js操作MySQL8.0数据库无法连接的问题解决

    使用node.js连接数据库MySQL 8时候,显示报错 ER_NOT_SUPPORTED_AUTH_MODE,本文就来介绍一下解决方法,感兴趣的可以了解一下
    2023-10-10
  • node连接mysql查询事务处理的实现

    node连接mysql查询事务处理的实现

    本文主要介绍了node连接mysql查询事务处理的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论