动态创建script标签发送GET请求处理跨域，接收返回的参数

动态创建script标签发送GET请求处理跨域，接收返回的参数

个人理解原理

方式一

1. 动态创建script标签发送请求的时候，一般会传递一个字段过去类似于 www.baidu.com?responData 以问号的形式拼接
2. 后台接收到请求之后，拿到问号后的字段，将返回的数据以 responData = { code: 200, data: {},...}的格式传递给前端
3. 返回的数据会自动挂载到window顶级对象上
4. 前端通过 window.responData 的形式获取到返回的数据

方式二

1. 路由地址为www.baidu.com?callback=callbackJSONP
2. 后台接收到请求之后，拿到的字段，将返回的数据以 function callbackJSONP(){return { "abc":"123" }}的格式传递给前端
3. 返回的数据会自动挂载到window顶级对象上
4. 前端直接使用window.callbackJSONP()调用，获取返回结果

nodeJS端

1. 首先获取前端传递的返回参数的变量名
2. 返回的参数类字符串似于 function callbackJSONP(){return { "abc":"123" }}

let express = require("express")
let path = require("path")
let app = express()
const port = 80
app.get("/test", (req, res) => {
  const { url } = req
  const callback = url.split("=")[1]
  const obj = {
    abc: "123",
  }
  const str = `function ${callback}(){
    return ${JSON.stringify(obj)}
  }`
  res.send(`${str}`)
})
app.listen(port)
console.log("server start in " + port)

JS端

使用Promise进行数据的返回

1. src请求的地址
2. responStr返回的参数名称，类似于?callback=callbackJSONP中的callbackJSONP

const createScript = (src, responStr = "") => {
  const scriptDom = document.createElement("script")
  scriptDom.type = "text/javascript"
  scriptDom.src = responStr ? `${src}?callback=${responStr}` : src
  const getWindow = window
  document.body.appendChild(scriptDom)
  return new Promise((resolve, reject) => {
    scriptDom.onload = () => {
      if (responStr) {
        const result = getWindow[responStr]()
        resolve(result)
      } else resolve()
      setTimeout(() => {
        document.body.removeChild(scriptDom)
      })
    }
    scriptDom.onerror = () => reject()
  })
}
const getData = await createScript(
   "http://localhost:80/test",
   "callbackJSONP",
)
console.log(getData, "")