在使用 Vite 开发时，如果你的前端项目需要请求后端 API，且后端和前端不在同一个域上，可能会遇到跨域问题。跨域是指浏览器出于安全考虑，阻止了前端网页向不同源（域名、协议、端口）发送请求。
解决跨域问题的方法：
- 使用 Vite 的代理功能（推荐在开发环境下使用）
- 配置后端服务器的 CORS（跨源资源共享）（如果你有权限配置后端）
- 在前端代码中使用
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 正常通信。
