vue中axios解决跨域问题

在Vue中使用axios解决跨域问题可以通过以下几种方式：

1. 代理请求：在`vue.config.js`文件中配置代理来解决跨域问题。示例如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 你要请求的后端接口地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 如果接口中有/api前缀，可以将其去除
        }
      }
    }
  }
}

然后在你的Vue组件中使用axios发送请求，将请求地址的前缀改为`/api`即可，示例如下：

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2. JSONP：如果后端接口支持JSONP，可以使用axios-jsonp插件来发送JSONP请求。安装axios-jsonp插件：

npm install axios-jsonp

然后在你的Vue组件中使用axios-jsonp发送请求，示例如下：

import axiosJsonp from 'axios-jsonp';

axios({
  url: 'http://api.example.com/users',
  adapter: axiosJsonp
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

3. CORS设置：如果你有权限修改后端接口的响应头，可以在后端接口中设置CORS，允许指定的域名访问接口。示例如下：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); // 允许指定的域名访问接口
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许的请求头
  next();
});

请根据你的具体情况选择适合的解决方案来解决Vue中的跨域问题。