前端

  1. const funJsonp = (params) => { //将参数转为序列化字符串
  2.     let temp = ''
  3.     for (let i in params) {
  4.         temp += i + '=' + params[i] + '&'
  5.     }
  7.     return temp
  8. }
  9. const defaultConfig = {
  10.     callbackName: "jsonpCallback"
  11. }
  13. jsonp跨域
  14. const jsonp = (url, params, options = defaultConfig) => {
  15.     // 返回一个可以链式调用的promise对象
  16.     return new Promise((resolve, reject) => {
  17.         //将前端传递querystring查询字符串的参数，拼接到地址栏
  18.         url = url.indexOf("?") > -1 ? url + funJsonp(params) : url + '?' + funJsonp(params)
  19.         url += `callback=${options.callbackName}`
  21.         //动态创建script标记
  22.         const script = document.createElement("script")
  23.         //设置接口的请求地址
  24.         script.setAttribute('src', url)
  26.         //设置请求jsonp接口的回调函数
  27.         window[options.callbackName]=result=>{
  28.            //请求jsonp接口成功后，删除该函数 - 不污染window
  29.            delete window[options.callbackName];
  30.            //从页面中删除请求接口动态创建的script标记
  31.            document.body.removeChild(script)
  32.            if(result){
  33.                resolve(result)
  34.            }else{
  35.                reject('服务器没有返回信息')
  36.            }
  37.         }
  38.         //动态创建script标记，错误的监听
  39.         script.addEventListener('error', () => {
  40.             delete window['jsonpCallback'];
  41.             document.body.removeChild(script);
  42.             reject('服务器加载失败！');
  43.         });
  44.         document.body.append(script)
  46.     })
  48. }
  50. //////ajax 跨域
  52. const request=(url,params,type='GET')=>{
  53.     return new Promise((resolve,reject)=>{
  54.         const xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft','XMLHTTP')
  56.         if(type==='Get'&&params){
  57.             url = url.indexOf("?") > -1 ? url + funJsonp(params) : url + '?' + funJsonp(params)
  58.             xhr.open(type,url)
  59.             xhr.send(null)
  60.          }else if(type==='POST'){
  62.               xhr.open(type,url)
  63.               xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
  64.               xhr.send(funJsonp(params))
  65.         }
  67.         xhr.onreadystatechange=()=>{
  68.             if(xhr.readyState===4){
  69.                 if(xhr.status===200){
  70.                     resolve(JSON.parse(xhr.responseText))
  71.                 }else{
  72.                     reject(new Error('request failed!'))
  73.                 }
  74.             }
  75.         }
  76.     })
  77. }
  1.   <script src="./index.js"> </script>
  2.     <script>
  3.      request("http://localhost:3000/api",{username:'zhangsan',password:123},'Get').then(res=>{
  4.          console.log(res)
  5.      })
  6.      request("http://localhost:3000/apiPost",{username:'zhangsan',password:13},'POST').then(res=>{
  7.          console.log(res)
  8.      })
  9.       fetch("http://localhost:3000/api").then(res=>{
  10.          return res.json()
  11.       }).then(res=>{
  12.           console.log(res)
  13.       })
  14.       jsonp("http://localhost:3000/api",{username:111,password:222}).then(res=>{
  15.             console.log(res)
  16.       }).catch(err=>{})
  17.     </script>

后台

  1. module.exports.formatJsonp=(callbackName,params)=>{
  2.     return callbackName+'('+JSON.stringify(params)+')'
  3. }
  1. app.get("/api",(req,res)=>{
  2.    let {query}=url.parse(req.url,true)
  3.    let {callback}=query
  4.    console.log(query)
  5.    const {formatJsonp}=require("./config")
  6.    if(callback){
  7.      res.writeHead(200,{'Content-Type':'text/javascript'})
  8.      const result={code:1,type:"jsonp"}
  9.      const data=formatJsonp(callback,result)
  10.      res.end(data)
  11.    }else{
  12.      res.writeHead(200,{'Access-Control-Allow-Origin':"*"})
  13.      res.end(JSON.stringify({code:1,type:"json"}))
  14.    }
  15. })
  16. app.post("/apiPost",(req,res)=>{
  17.   let data=req.body
  18.   res.writeHead(200,{'Access-Control-Allow-Origin':'*'})
  19.   res.end(JSON.stringify({code:1,methods:'post',type:"json",data}))
  20. })