利用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)


相关文章
|
Android开发
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
3877 0
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
350 0
|
11月前
|
Web App开发 前端开发 JavaScript
Promise.allSettled()方法的兼容性如何?
Promise.allSettled()方法的兼容性如何?
631 75
|
JSON 安全 JavaScript
jsonp和跨域:实现跨域请求的巧妙方法
jsonp和跨域:实现跨域请求的巧妙方法
|
网络安全 数据安全/隐私保护
什么是 CSRF 攻击
CSRF(跨站请求伪造)攻击是指攻击者诱导用户点击恶意链接或提交表单,利用用户已登录的身份在目标网站上执行非授权操作,如转账、修改密码等。这种攻击通常通过嵌入恶意代码或链接实现。
|
存储 安全 API
深入理解RESTful API设计原则
本文旨在探讨RESTful API设计的基本原则和最佳实践,帮助开发者构建高效、可维护的Web服务。通过分析REST架构的核心概念,如资源、统一接口、无状态通信等,本文将指导读者如何设计符合REST原则的API,以及如何处理常见的设计挑战,如版本控制、错误处理和安全性问题。
|
存储 缓存 NoSQL
介绍一下Redis
【10月更文挑战第19天】介绍一下Redis
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
568 0
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
943 4
|
JavaScript
VUE element-ui之table表格内容样式(颜色)修改
VUE element-ui之table表格内容样式(颜色)修改
1190 0
VUE element-ui之table表格内容样式(颜色)修改