script跨域请求前端

通过script标签实现跨域，个人自己笔记

后端返回的是个带实参的函数的调用'cb({"name":"erliuzi","age":22})'，调用前端提前定义好的函数，用形参接收传过来的值 function cb (data){console.log(data)}
HTML
页面来个按钮

<button id="btn">点击请求数据</button>

JS

腾讯天气API：

请求地址：	https://wis.qq.com/weather/common
请求方式	GET 支持jsonp

参数

参数名	必填	类型	参数
source	是	string	'px' 或 'xw'
weather_type	是	string	'forecast_1h' (未来7天) 'forecast_24h' (未来七天)
province	是	string	'江苏省' (省份)
city	是	string	'南京市' （城市）
county	否	string	'' （县）

weather_type 可用选项 'forecast_1h|forecast_24h|index|alarm|limit|tips'

调用发送跨域请求

const btn = document.getElementById('btn')

    btn.onclick = function () {

      jsonp({
      	// 天气预报
        url: 'https://wis.qq.com/weather/common',
        data: {
          source: 'pc',
          weather_type: 'forecast_1h',
         // weather_type: 'forecast_1h|forecast_24h|index|alarm|limit|tips',
          province: '江苏省',
          city: '南京市'
        },
        success: function (data) {
          console.log(data, 'data')
        }
      })
      
    }

封装的

 //封装jsonp跨域请求
    function jsonp(option) {

      let param = ''

      // 拼接data里参数
      for (const key in option.data) {
        param += '&' + key + '=' + option.data[key]
        console.log(param, 'param')
      }
      // 随机产生函数的名字来区别页面不同的跨域请求
      let fnName = 'callback' + Math.random().toString().replace('.', '')

      // 将随机产生的函数挂载到全局以便后端返回这个函数能够执行
      window[fnName] = option.success

      // 拼接完整的url请求
      let url = option.url + '?callback=' + fnName + param
      console.log(url, 'url')



      // 动态创建script标签
      let script = document.createElement('script')
      // 添加src
      script.src = url
      // 追加到页面
      document.body.appendChild(script)
      console.log(script)

      // script支持onload事件。在script标签完成请求后移除
      script.onload = function () {
        document.body.removeChild(script)
      }
    }