前端 利用jsonp解决跨域问题

简介: 前端 利用jsonp解决跨域问题

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/say',

  params: { wd: 'Iloveyou' },

  callback: 'show'

}).then(data => {

  console.log(data)

})

</script>


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)

相关文章
|
6月前
|
JSON 前端开发 安全
前端开发中的跨域解决方案探究
跨域是前端开发中常见的问题之一,本文将探讨跨域的概念、产生的原因,以及常见的解决方案,包括JSONP、CORS、代理等。通过本文的学习,读者可以深入了解跨域问题及解决方案,为自己的前端开发工作提供参考。
|
4天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
16 4
|
6月前
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
2月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
26 1
|
3月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
46 0
|
5月前
|
JSON 前端开发 JavaScript
前端如何实现跨域
前端如何实现跨域
|
6月前
|
JSON 前端开发 JavaScript
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
详细剖析让前端头疼的跨域问题是怎么产生的,又该如何解决
|
6月前
|
前端开发 安全 开发者
前端开发中的跨域资源共享(CORS)问题及解决方案探讨
在前端开发中,跨域资源共享(CORS)是一个常见且重要的问题。本文将深入探讨CORS的原理、影响以及解决方案,帮助开发者更好地应对跨域请求问题。
|
6月前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
87 0