什么是跨域请求_如何用javascript解决CORS问题【教程】_技术教程

CORS 是浏览器强制实施的安全机制，非 JS 问题；跨域请求需服务端配置 Access-Control-Allow-Origin 等响应头，否则请求被拦截；预检请求（OPTIONS）在非简单请求时触发，需服务端正确响应；前端仅能通过代理或 credentials 配合服务端实现合规跨域。

浏览器会直接拦截跨域请求，不是 JavaScript “解决”了 CORS，而是你得按浏览器的规则来发请求、配服务端——否则连请求都发不出去。

为什么 fetch 或 XMLHttpRequest 会报 CORS 错误

这不是 JS 的 bug，是浏览器的安全机制：当协议、域名、端口任一不同，就视为跨域；此时若响应头不含 Access-Control-Allow-Origin，浏览器就拒绝把响应内容交给 JS。

常见错误现象：

控制台报错 Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
Network 面板里请求状态显示 (failed) net::ERR_FAILED 或 preflight is invalid
fetch() 抛出 TypeError，但 catch 捕不到（因为请求根本没完成）

哪些请求会触发预检（OPTIONS）

只要满足以下任一条件，浏览器会在发主请求前自动发一个 OPTIONS 预检请求：

使用了非简单方法（如 PUT、DELETE、PATCH）
设置了自定义请求头（如 Authorization、X-Request-ID）
Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain

服务端必须正确响应这个 OPTIONS 请求，返回 204 或 200，且带上 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头，否则预检失败，主请求不会发出。

前端能做的有限操作：mode 和 credentials

JS 侧唯一可控的“绕过”方式，是告诉浏览器：“这次请求不需要 CORS 检查”——但这只适用于同源或已配好代理的场景：

开发时用 mode: 'no-cors'？不行。它会让响应变成 opaque 类型，JS 读不到任何数据，只适合发埋点日志这类单向请求
需要带 Cookie？必须同时设 credentials: 'include'，且服务端响应头必须明确写 Access-Control-Allow-Credentials: true（此时 Access-Control-Allow-Origin 不能为 *）
真正有效的做法是：开发期用本地代理（如 vite.config.ts 中的 server.proxy），把 /api 代理到后端地址，让请求看起来是同源的

示例（Vite 代理配置）：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}