vue使用axios跨域解决

在Vue项目中使用axios进行跨域请求的解决方法如下：

1. 安装axios：首先，在你的Vue项目中安装axios依赖。

npm install axios

2. 创建axios实例：在你的项目中创建一个axios实例，用于发送请求。可以在`main.js`文件或其他适当的地方创建。例如：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
  withCredentials: true, // 允许携带跨域请求的凭证
});

3. 配置跨域代理：在Vue项目的根目录下的`vue.config.js`文件中进行配置。如果该文件不存在，你可以手动创建。在`vue.config.js`文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 设置代理目标的基础URL
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '', // 将/api重写为空，如 /api/users 将被转发到 http://api.example.com/users
        },
      },
    },
  },
};

4. 发送跨域请求：现在你可以使用`instance`来发送跨域请求了。例如：

instance.get('/api/users').then(response => {
  console.log(response.data);