JSONP跨域请求在Vue中怎么用？一直报错

根本原因是作用域问题。当你在动态创建的 script 标签中指定回调函数时，浏览器会在全局作用域中查找这个回调函数，而不是在 Vue 实例的作用域内查找。

解决这个问题的方法是在全局作用域中定义回调函数，然后在 Vue 实例中调用它。具体步骤如下：

1. 在 Vue 实例外部定义一个全局回调函数。
2. 将这个全局回调函数与 Vue 实例关联起来，以便在获取到数据后更新 Vue 的 data 属性。

下面是修改后的代码示例：

<template>

  <div>{{ result }}</div>

</template>



<script>

// 在 Vue 实例外部定义全局回调函数

window.jsonpCallback = function(res) {

  // 调用 Vue 实例的 updateResult 方法来更新数据

  if (typeof window.vueInstance.updateResult === 'function') {

    window.vueInstance.updateResult(res);

  }

}



export default {

  data() {

    return { result: '' }

  },

  mounted() {

    // 将 Vue 实例挂载到 window 对象上，以便在全局回调函数中访问

    window.vueInstance = this;



    const script = document.createElement('script')

    script.src = 'https://suggestion.baidu.com/su?wd=前端&cb=jsonpCallback'

    document.head.appendChild(script)

  },

  methods: {

    updateResult(res) {

      // 更新 Vue 实例中的 result 数据

      this.result = res.s[0] || 'No suggestions found';

    }

  }

}

</script>

为什么这样做？
1. 全局回调函数：JSONP 请求需要在全局作用域中定义回调函数，因为浏览器会在全局作用域中查找并调用这个函数。
2. 关联 Vue 实例：通过将 Vue 实例挂载到 window 对象上，并在全局回调函数中调用 Vue 实例的方法，可以在获取到数据后更新 Vue 的 data 属性。

这样处理后，当 JSONP 请求成功并返回数据时，全局回调函数会被调用，并且能够正确地更新 Vue 实例中的数据。

哈，JSONP这个老古董问题我熟。你这代码的问题在于callback函数是挂在methods里的，但JSONP需要callback函数在全局作用域。

两个解决方案：

1. 简单粗暴的直接挂window上：

mounted() {

  window.callback = (res) => {

    this.result = res.s[0]

  }

  const script = document.createElement('script')

  script.src = 'https://suggestion.baidu.com/su?wd=前端&cb=callback'

  document.head.appendChild(script)

}

2. 更优雅的用jsonp库（推荐）：
先安装 jsonp 这个包

import jsonp from 'jsonp'



methods: {

  fetchData() {

    jsonp('https://suggestion.baidu.com/su?wd=前端', null, (err, data) => {

      if (!err) {

        this.result = data.s[0]

      }

    })

  }

}

第二种方式更靠谱，不用手动处理script标签和全局污染。JSONP这种上古技术现在确实用得少了，CORS才是王道，但遇到必须用JSONP的老接口也没办法。