1.   // url为请求的网址，data为url携带的参数
  2.   let jsonp = function (url, data = {}, callback) {
  3.     // 转化data为url字符串形式，例{a: 1, b: c} => a=1&b=c&
  4.     // indexOf未检查到？则返回-1
  5.     let str = url.indexOf('?') === -1 ? '?' : '&'
  6.     if (data !== {}) {
  7.       for (let key in data) {
  8.         str += `${key}=${data[key]}&` // es6的模板字符串
  9.       }
  10.     }
  11.     // callback参数，指定回调函数的名字
  12.     let n = 'jsonp_' + Math.random().toString().replace('.', '').substr(1, 6)
  13.     str += 'callback=' + n
  14.     // 创建script标签并添加src属性
  15.     let s = document.createElement('script')
  16.     s.src = url + str // 将参数添加到url上
  17.     // 回调挂载在全局对象上
  18.     window[n] = function (data) {
  19.       callback(data)
  20.       document.body.removeChild(s) // 用完script标签就删除
  21.     }
  22.     document.body.appendChild(s)
  23.   }
  25.   // 测试效果
  26.   jsonp('http://localhost:3000/user?username=zs&age=20', { email: "123" }, function (data) { console.log(data) })

server

  1. const express = require('express')
  2. const app = express()
  3. const bodyParser = require('body-parser')
  4. // app.use(bodyParser.urlencoded({ extended: false }))
  5. app.use(bodyParser.json())
  6. // post请求体中的Content-Type为：application/json，则配置如下：
  7. // 解决跨域的问题
  8. app.all('*', function (req, res, next) {
  9.   res.header("Access-Control-Allow-Origin", "*");
  10.   res.header('Access-Control-Allow-Headers', 'Content-Type');
  11.   // res.header("Access-Control-Allow-Headers", "X-Requested-With");
  12.   // res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  13.   // res.header("X-Powered-By",' 3.2.1')
  14.   // res.header("Content-type", "application/json");
  15.   next();
  16. });
  17. app.get('/user', function (req, res) {
  18.   let { callback } = req.query
  19.   if (callback) {
  20.     res.setHeader('Content-type', 'application/javascript');
  21.     res.send(callback + '({ message: "Get请求成功", code: 1 })')
  22.   } else {
  23.     res.send({ message: "Get请求成功", code: 1 })
  24.   }
  25. })
  27. app.post('/user', (req, res) => {
  28.   res.send({ message: "Post请求成功", code: 1 })
  29. })
  32. app.listen(3000, () => {
  33.   console.log('服务器启动成功');
  34. })