利用jsonp解决跨域问题

简介: 这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

1、HTML页面代码:

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

 <title></title>

</head>

<body>

 <div>

  我要利用jsonp解决跨域问题

 </div>

</body>

</html>

<script>

function jsonp({url,params,callback}){

 return new Promise((resolve,reject)=>{

  let script =document.createElement('script')

  window[callback] = function(data){

      resolve(data)

      document.body.removeChild(script)

  }

  params = {...params,callback} //wd=b&callback=show

  let arrs = []

  for(let key in params){

         arrs.push(`${key}=${params[key]}`)

  }

  script.src = `${url}?${arrs.join('&')}`

  document.body.appendChild(script)

 })

}

jsonp({

  url: 'http://localhost:3000/test',

  params: { wd: '关注小编哈' },

  callback: 'show'

}).then(data => {

  console.log(data)

})

</script>


2、server.js界面代码:

// server.js

let express = require('express')

let app = express()

app.get('/test', function(req, res) {

 let { wd, callback } = req.query

 console.log(wd) // 关注小编

 console.log(callback) // show

 res.end(`${callback}('关注了')`)

})

app.get('/qwer', function(req, res) {

 res.end('123')

})

app.listen(3000)


相关文章
|
JSON 安全 JavaScript
jsonp和跨域:实现跨域请求的巧妙方法
jsonp和跨域:实现跨域请求的巧妙方法
|
12月前
|
JSON 前端开发 安全
跨域问题产生的原因以及解决方案
【10月更文挑战第9天】跨域问题是前端开发中不可避免的一个问题,了解其产生的原因以及掌握多种解决方案是非常重要的。在实际应用中,需要根据项目的具体情况和需求,选择合适的解决方案,并不断关注跨域问题的发展趋势,以便及时应对新的挑战。
|
11月前
|
网络安全 数据安全/隐私保护
什么是 CSRF 攻击
CSRF(跨站请求伪造)攻击是指攻击者诱导用户点击恶意链接或提交表单,利用用户已登录的身份在目标网站上执行非授权操作,如转账、修改密码等。这种攻击通常通过嵌入恶意代码或链接实现。
|
11月前
|
存储 安全 API
深入理解RESTful API设计原则
本文旨在探讨RESTful API设计的基本原则和最佳实践,帮助开发者构建高效、可维护的Web服务。通过分析REST架构的核心概念,如资源、统一接口、无状态通信等,本文将指导读者如何设计符合REST原则的API,以及如何处理常见的设计挑战,如版本控制、错误处理和安全性问题。
|
12月前
|
存储 缓存 NoSQL
介绍一下Redis
【10月更文挑战第19天】介绍一下Redis
|
人工智能 编解码 算法
使用PAI-DSW x Free Prompt Editing开发个人AIGC绘图小助理
本文介绍如何借助阿里云PAI-DSW及Free Prompt Editing算法开发个性化AIGC绘图助手,实现图像智能编辑与生成。首先需领取PAI-DSW免费试用资源并创建实例;随后通过运行教程文件完成环境搭建。WebUI界面预设了多种参数供调整,如图像分辨率、编辑层数量等,支持更改图像背景与风格等功能演示。完成实验后应及时清理资源以避免额外费用。此外,参与阿里云开发者社区的“AIGC绘图小助手”活动,不仅可获得免费云资源试用,还有机会赢得桌面折叠风扇、小度智能屏X9等礼品。
|
运维 Java 关系型数据库
Exception: HOUR_OF_DAY: 0 -> 1
Exception: HOUR_OF_DAY: 0 -> 1
348 1
|
消息中间件 Java Maven
解析Spring Boot中的事务管理机制
解析Spring Boot中的事务管理机制
|
消息中间件 API RocketMQ
你的RocketMQ消费者组(Consumer Group)在查看时显示为离线,这可能是由于消费者组的状态没有被正确更新
你的RocketMQ消费者组(Consumer Group)在查看时显示为离线,这可能是由于消费者组的状态没有被正确更新【1月更文挑战第10天】【1月更文挑战第49篇】
1930 5