vue中如何处理跨域请求

在Vue中处理跨域请求，可以通过以下几种方式：

1. 在后端服务器上设置允许跨域请求的响应头。例如，在Express框架中，可以使用cors中间件来设置跨域请求头：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

2. 使用Vue的代理设置。在Vue的配置文件vue.config.js中，可以使用devServer.proxy属性来设置代理：

module.exports = {
  devServer: {
    proxy: 'http://example.com'
  }
}

这样，所有以/api开头的请求都会被代理到http://example.com域名下。

3. 使用JSONP。JSONP（JSON with padding）是一种跨域请求的解决方案，可以在前端页面中通过动态创建<script>标签来实现。在Vue中，可以封装一个JSONP请求的方法来处理跨域请求：

function jsonp(url, params) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    const callbackName = 'jsonp_callback_' + Date.now();
    const query = params ? '&' + Object.keys(params).map(key => {
      return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&') : '';

    window[callbackName] = function(data) {
      delete window[callbackName];
      document.body.removeChild(script);
      resolve(data);
    };

    script.src = url + '?callback=' + callbackName + query;
    document.body.appendChild(script);
  });
}

这样，就可以使用jsonp函数来发起跨域请求了。