使用axios跨域的步骤与代码

1. 确认跨域问题

在使用axios进行跨域请求之前，需要确保你的请求确实存在跨域问题。通过查看浏览器的开发者工具可以查看网络请求，如果请求返回错误信息，如"Access-Control-Allow-Origin"，那么就需要进行跨域配置。

2. 在vite项目中安装axios

使用npm或者yarn在你的vite项目中安装axios模块。

npm install axios

或

yarn add axios

3. 创建一个axios实例

在你的代码中引入axios模块，并创建一个axios实例。

import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

4. 配置跨域请求

使用axios实例的defaults属性来配置跨域请求。

instance.defaults.withCredentials = true; // 允许请求携带cookie

5. 发送跨域请求

使用axios实例的get、post等方法发送跨域请求。

// GET请求示例
instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST请求示例
instance.post('/api/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

6. 添加跨域配置

在你的vite项目的根目录下创建一个vite.config.js文件，并添加跨域配置。

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: ' // 设置代理的目标地址
        changeOrigin: true, // 允许跨域
        rewrite: path => path.replace(/^\/api/, ''), // 重写请求路径
      },
    },
  },
});

7. 运行项目

在终端中运行vite项目即可。

npm run dev

8. 示例代码

下面是一个完整的示例代码，你可以参考和使用。

import axios from 'axios';

const instance = axios.create({
  baseURL: '
  timeout: 5000,
});

instance.defaults.withCredentials = true;

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

export default instance;

以上就是使用axios实现跨域请求的步骤和代码。通过以上的配置和代码，你应该可以成功进行跨域请求了。如果你还有其他问题，请随时提问。