JavaScript跨域方案_CORS与代理配置_技术教程

跨域问题可通过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：

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 的场景。