vue axios jsonp跨域问题

Vue是一款非常流行的JavaScript框架，而Axios是一个基于Promise的HTTP客户端工具库。然而，在使用Vue和Axios时，我们可能会遇到跨域问题。当我们从一个域名发送HTTP请求到另一个域名时，由于浏览器的同源策略限制，会产生跨域问题。Jsonp是一种解决跨域问题的方法之一。

Jsonp全称为JSON with Padding，它通过在前端创建一个script标签，并设置其src属性为包含回调函数的URL，来实现跨域请求。服务器在收到请求后，将返回一个JavaScript函数调用，并将数据作为参数传入该函数中。这样，前端页面就可以通过定义该回调函数，获取到服务器返回的数据。

在Vue中使用Axios发送Jsonp请求，可以通过设置Axios的`params`选项来实现。具体步骤如下：

1. 首先，在Vue项目中安装Axios库：`npm install axios`

2. 然后在Vue组件中引入Axios：`import axios from 'axios'`

3. 创建一个方法来发送Jsonp请求：

methods: {
  fetchData() {
    axios({
      method: 'jsonp',
      url: 'http://example.com/api',
      params: {
        callback: 'jsonpCallback',  // 回调函数名
      }
    })
    .then(response => {
      console.log(response.data);  // 获取到服务器返回的数据
    })
    .catch(error => {
      console.log(error);
    });
  }
}

4. 在上述代码中，通过设置`params`属性将回调函数名传递给服务器。服务器在返回数据时，会将回调函数名拼接到返回数据的尾部。

5. 最后，在模板或其他地方调用该方法，即可发送Jsonp请求来获取跨域数据。

需要注意的是，由于Jsonp使用`<script>`标签加载数据，因此只能发送GET请求。同时，为了保证安全性，我们需要对返回的数据进行校验和过滤，以防止恶意注入脚本。

以上就是通过Vue和Axios发送Jsonp请求来解决跨域问题的方法。希望这能对你有所帮助！