在vue中解决跨域问题，通常有两种方法：使用代理和使用jsonp。

跨域（Cross-origin）指的是在Web应用程序中，通过不同域名、端口或协议的组合进行通信的过程。具体来说，当一个 Web 应用程序试图从一个与其本身所在的域不同的服务器上请求资源时，就会发生跨域请求。

这种跨域请求是出于安全方面的考虑而被浏览器限制的。因为如果允许不同域之间的数据交互，那么恶意攻击者可能会利用某些漏洞来窃取用户的敏感信息或进行其他不良行为。

为了实现合法的跨域请求，开发人员需要采用一些技术手段，如JSONP、CORS等。这些技术允许浏览器向不同域发送请求并接收响应，同时确保安全性和可靠性。

使用代理
在vue.config.js文件中添加如下代码可以配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的代码会将所有以/api开头的请求代理到http://localhost:3000上。其中，ws表示是否启用websockets，changeOrigin表示是否改变原始主机头，pathRewrite表示重写路径，将/api替换为空。

使用jsonp
在vue中使用jsonp解决跨域问题比较麻烦，需要手动引入jsonp库，并且需要在后端设置响应头。

下面是一个封装接口调用的例子：

// api.js

import axios from 'axios'

const baseURL = process.env.NODE_ENV === 'production' ? 'http://yourdomain.com' : 'http://localhost:3000'

const api = axios.create({
  baseURL,
  withCredentials: true, // 跨域请求时发送cookie
  headers: { 'Content-Type': 'application/json;charset=utf-8' },
  timeout: 10000 // 超时时间
})

export const getUserInfo = () => {
  return api.get('/user/info')
}

export const login = (data) => {
  return api.post('/login', data)
}

还可以这样写创建request.js

import axios from "axios";

// 配置项
const axiosOption = {
  // 开发环境
  baseURL: "/api",
  // 重定向
  withCredentials: true,
  // 超时时间
  timeout: 3000,
};

// 创建一个单例
const instance = axios.create(axiosOption);

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

再次调用request.js

import request from "./request";

// 歌单列表
export const getSongListCategories = () =>request.get("/getSongLists?categoryId=10000000");
// 歌单分类
export const gedanfenlei = () => request.get("/getSongListCategories");

在上面的代码中，我们使用axios库创建了一个api实例，并导出了两个接口调用方法：getUserInfo和login。在请求中，我们设置了跨域请求时发送cookie，设置了请求头的Content-Type为application/json;charset=utf-8，以及10秒的超时时间。

在组件中使用上面的接口调用方法：

// User.vue
<template>
  <div>{{ userInfo }}</div>
</template>

<script>
import { getUserInfo } from './api'

export default {
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.fetchUserInfo()
  },
  methods: {
    async fetchUserInfo () {
      try {
        const res = await getUserInfo()
        this.userInfo = res.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在上面的代码中，我们引入了getUserInfo接口调用方法，并在created钩子函数中调用该方法来获取用户信息。在获取成功后，我们将用户信息保存在组件的userInfo变量中，并在模板中进行展示。如果获取失败，则打印错误信息。