跨域问题9种解决方法详解

前端开发中令人头疼的跨域问题，源于浏览器严格的同源策略限制，但其实有9种切实可行的解决方案——从生产环境首选的后端CORS配置和Nginx反向代理，到开发阶段便捷的Vite/Webpack本地代理；从兼容老旧系统的JSONP和window.name+iframe方案，到现代跨窗口通信的postMessage、无跨域限制的WebSocket，再到适用于子域场景的document.domain设置及临时调试用的cors-anywhere代理服务。每种方法各有所长、适用不同场景，掌握它们，就能游刃有余地突破网络请求障碍，让前后端协作真正畅通无阻。

前端跨域问题是开发中常见的网络请求障碍，主要因为浏览器的同源策略限制。当协议、域名或端口任一不同，就会触发跨域问题。以下是9种实用的解决方案，帮助你在不同场景下顺利处理跨域请求。

1. 后端设置CORS（跨域资源共享）

这是最常见且推荐的方式。后端在响应头中添加 Access-Control-Allow-Origin，允许指定或所有来源访问资源。

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');
  next();
});

只要后端正确配置，前端无需额外操作即可发起请求。

2. 使用代理服务器（如Nginx反向代理）

通过Nginx将前端请求转发到目标接口，使请求看起来是同源的。

location /api/ {
  proxy_pass http://your-backend-server.com/;
}

前端请求 /api/users 实际被代理到后端服务，规避了跨域限制。

3. 开发环境使用webpack/Vite代理

前端构建工具支持本地开发时的请求代理，解决开发阶段跨域问题。

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

这样请求 /api/user 会被转发到目标服务器。

4. JSONP（仅支持GET请求）

利用