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


相关文章
|
2月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
35 0
|
10月前
Ajax-jsonp跨域
Ajax-jsonp跨域
|
缓存 JSON 前端开发
Ajax:跨域与JSONP
Ajax:跨域与JSONP
65 1
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
99 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
136 0
跨域访问(JSONP)
|
前端开发
前端 利用jsonp解决跨域问题
前端 利用jsonp解决跨域问题
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
288 0
同源策略与跨域访问(jsonp和cors等)
|
JSON 缓存 JavaScript
JSONP - 跨域篇
JSONP - 跨域篇
238 0
JSONP - 跨域篇
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
243 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
|
JSON JavaScript 前端开发
ajax实现JSONP跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
3503 0