JavaScript怎样处理跨域问题【教程】_技术教程

JavaScript无法单方面解决跨域问题，需服务端配合或改用不触发CORS的方案；fetch/XHR跨域时浏览器发OPTIONS预检，服务端未返回合法CORS响应头即报错；常见需配置的响应头包括Access-Control-Allow-Origin、Methods、Headers及Credentials（若带cookie）；script/img等标签加载、开发代理、SSR等场景不触发CORS。

JavaScript 本身无法绕过浏览器的同源策略，所谓“处理跨域问题”，本质是协调服务端配合、或换用不触发 CORS 的方案——不是前端代码能单方面解决的。

为什么 fetch / XMLHttpRequest 会报 `CORS error`

浏览器在发起跨域请求（协议、域名、端口任一不同）时，会先发一个 OPTIONS 预检请求。如果服务端没返回合法的 Access-Control-Allow-Origin 等响应头，就直接拦截，控制台抛出 CORS error。

常见错误现象：Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
注意：这个错误只在浏览器环境出现；curl 或后端调用完全不受影响
即使服务端加了 Access-Control-Allow-Origin: *，若前端带了 credentials: true（比如传 cookie），就必须指定具体域名，不能用 *
Content-Type 是 application/json 一般会触发预检；text/plain、application/x-www-form-urlencoded、multipart/form-data 在满足简单请求条件时可跳过

服务端必须加的响应头有哪些

前端改不了 CORS 错误，真正要动的是服务端响应头。最小必要集通常包括：

Access-Control-Allow-Origin
：必须，值为请求来源域名（如 https://example.com）或 *（无 credentials 时）
Access-Control-Allow-Methods：列出允许的 HTTP 方法，如 GET, POST, PUT, DELETE
Access-Control-Allow-Headers：前端实际发送的自定义头（如 Authorization、X-Request-ID）必须在此声明
若前端设了 credentials: true，还需加 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能为 *

示例（Node.js + Express）：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-app.com');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});