跨域问题可通过CORS和代理解决。CORS需服务端设置Access-Control-Allow-Origin等响应头，如Express中配置允许特定源、方法和请求头；开发环境可用Webpack或Vite的代理功能，将/api请求转发至后端服务，避免浏览器跨域限制；生产环境推荐后端配置CORS或使用Nginx反向代理，使前后端同域部署，从根本上解决跨域问题。
跨域问题是前端开发中常见的挑战，尤其是在前后端分离架构下。当浏览器发起的请求目标与当前页面协议、域名或端口不一致时，就会触发同源策略限制。为了解决这个问题，CORS 和代理是两种主流方案。下面分别介绍它们的原理和配置方式。
CORS：跨域资源共享
CORS（Cross-Origin Resource Sharing）是一种由浏览器支持的机制，允许服务端声明哪些外部源可以访问其资源。核心在于服务器通过设置特定的响应头来控制跨域权限。
常见响应头包括：
- Access-Control-Allow-Origin：指定允许访问资源的源，如 * 或具体域名
- Access-Control-Allow-Methods：允许的 HTTP 方法，如 GET、POST 等
- Access-Control-Allow-Headers：允许携带的请求头字段
- Access-Control-Allow-Credentials：是否允许携带凭据（如 Cookie）
例如，在 Node.js + Express 中设置 CORS：
立即学习“Java免费学习笔记（深入）”；
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
开发环境代理配置
在前端开发阶段，可以通过构建工具内置的代理功能绕过跨域限制。这种方式不会真正解决生产环境的跨域问题，但能提升本地调试效率。
以 Webpack Dev Server 为例，在 webpack.config.js 中配置代理：
devServer: {proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
这样，前端请求 /api/users 会被代理到后端服务 http://localhost:8080/users，浏览器看到的是同源请求，避免了跨域错误。
Vite 中的代理设置
使用 Vite 构建项目时，可在 vite.config.js 中配置 devServer 代理：
export default defineConfig({server: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
secure: false
}
}
}
})
该配置适用于对接第三方接口或后端未开启 CORS 的场景。
生产环境建议
代理仅用于开发阶段。生产环境中应由后端统一配置 CORS 响应头，或通过 Nginx 反向代理将前后端部署在同一域名下，从根本上规避跨域问题。
例如，Nginx 配置示例：
location /api/ {proxy_pass http://backend-server/;
proxy_set_header Host $host;
}
这样前端请求同域下的 /api 路径，由 Nginx 转发到真实后端服务。
基本上就这些。CORS 是标准方案，需服务端配合；代理适合开发调试。根据实际部署环境选择合适方式即可。
