VUE3 vite下的axios跨域

在使用 Vite 开发时，如果你的前端项目需要请求后端 API，且后端和前端不在同一个域上，可能会遇到跨域问题。跨域是指浏览器出于安全考虑，阻止了前端网页向不同源（域名、协议、端口）发送请求。

解决跨域问题的方法：

1. 使用 Vite 的代理功能（推荐在开发环境下使用）
2. 配置后端服务器的 CORS（跨源资源共享）（如果你有权限配置后端）
3. 在前端代码中使用 axios 发起请求

在这里，我们主要关注 Vite 中的代理配置和 axios 如何与代理一起使用。

1. 配置 Vite 代理

Vite 提供了代理功能，可以通过配置 vite.config.js 文件，转发请求到指定的目标地址，从而避免浏览器的跨域问题。

1.1 配置 Vite 代理

假设你要请求的 API 地址是 https://api.example.com，你可以在 vite.config.js 中配置代理来解决开发时的跨域问题。

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // 代理路径
      '/api': {
        target: 'https://api.example.com', // 目标服务器地址
        changeOrigin: true, // 是否修改请求头中的 Origin 字段
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

1.2 配置解析

• /api：这个是你本地请求的路径。例如你请求 /api/user，Vite 会把这个请求代理到 https://api.example.com/user。
• target: 'https://api.example.com'：这个是目标服务器的地址，Vite 会将请求转发到这个地址。
• changeOrigin: true：这个选项让 Vite 修改请求头中的 Origin 字段，避免目标服务器拒绝请求。
• rewrite: (path) => path.replace(/^\/api/, '')：这个配置会将路径中的 /api 替换为空，确保请求到目标服务器时路径正确。例如，/api/user 会被转发为 /user。

1.3 请求示例

在前端代码中，使用 axios 发起请求：

import axios from 'axios';

axios.get('/api/user')
  .then(response => {
    console.log('API Response:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

通过上述配置，当你访问 /api/user 时，Vite 会将请求转发到 https://api.example.com/user，并避免了跨域问题。

2. 配置 CORS（后端解决方案）

跨域问题是浏览器的安全限制，解决方案之一是在后端服务器上配置 CORS（跨源资源共享），允许来自不同源的请求。

假设你使用的是一个 Node.js 后端（比如 Express），你可以通过以下方法启用 CORS。

2.1 后端（Node.js + Express）启用 CORS

安装 cors 中间件：

npm install cors

然后在服务器代码中启用它：

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 允许所有来源的跨域请求

app.get('/api/user', (req, res) => {
  res.json({ user: 'John Doe' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

cors() 默认允许所有的跨域请求，你也可以通过传入配置来限制允许的域名：

app.use(cors({
  origin: 'http://localhost:5173', // 只允许来自这个地址的请求
}));

3. 使用 axios 发起跨域请求

3.1 发送 GET 请求

使用 axios 发起 GET 请求：

import axios from 'axios';

axios.get('https://api.example.com/user')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3.2 发送 POST 请求

发送带有数据的 POST 请求：

import axios from 'axios';

const userData = { name: 'John Doe' };

axios.post('https://api.example.com/user', userData)
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. 总结

• Vite 的代理功能：在开发环境中使用，避免了浏览器的跨域限制，适用于前端与后端在不同域的开发环境。通过配置 vite.config.js 中的 server.proxy，可以将请求路径代理到目标 API 服务器。
• CORS：后端服务器可以配置 CORS 来允许不同源的请求，从而解决跨域问题。如果你有权限修改后端，可以配置 CORS 以支持跨域请求。
• axios：在前端使用 axios 发起请求，通过代理转发请求，或直接请求后端支持 CORS 的 API。

通过这些方法，你可以方便地解决跨域问题，确保你的前端应用能与后端 API 正常通信。