浏览器因同源策略拦截跨域请求，解决办法包括：一、服务端添加cors响应头；二、nginx反向代理；三、vue3+vite开发代理；四、express使用cors中间件；五、php内嵌header声明。
如果您在前端发起 HTTP 请求时收到“Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy”错误，说明浏览器因同源策略拦截了跨域请求。以下是多种可立即实施的解决办法：
一、在服务端响应头中添加 CORS 配置
该方法直接在服务器返回的 HTTP 响应中注入必需的跨域许可头，使浏览器允许前端访问资源。适用于拥有后端控制权的场景。
1、在 Node.js Express 应用中，于路由前插入中间件：
2、调用 res.setHeader('Access-Control-Allow-Origin', '*') 设置允许来源；
3、添加 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') 明确支持的请求方法；
4、设置 res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With') 以覆盖常见自定义头；
5、对 OPTIONS 预检请求单独返回 204 状态码，避免被拒绝。
二、使用 Nginx 反向代理消除跨域
该方法将前端请求代理至目标接口同源路径下，使浏览器判定为同源请求，完全规避 CORS 检查。适用于无法修改后端代码或需统一管控的部署环境。
1、编辑 Nginx 配置文件，在 server 块内新增 location 路由规则：
2、配置 proxy_pass https://api.example.com/ 将 /api/ 开头的请求转发至真实后端；
3、添加 proxy_set_header Host $host; 保持原始 Host 头；
4、加入 proxy_set_header X-Real-IP $remote_addr; 透传客户端真实 IP；
5、执行 nginx -t && nginx -s reload 重载配置生效。
三、在 Vue3 + Vite 项目中配置开发代理
该方法仅作用于本地开发环境（vite dev server），通过代理将 /api 请求重写至后端地址，不改变生产行为，适合前后端分离调试阶段。
1、打开项目根目录下的 vite.config.ts 文件；
2、在 server.proxy 配置项中添加对象映射：
3、设置键为 '/api'，值为包含 target、changeOrigin、rewrite 的配置对象；
4、确保 rewrite 函数将 /api/xxx 替换为 /xxx 以匹配后端路由；
5、重启 Vite 开发服务器使代理生效。
四、通过 Express 中间件 cors 快速启用
该方法利用成熟的第三方中间件自动注入完整 CORS 头，减少手动配置遗漏风险，适合 Express 基础项目快速集成。
1、运行 npm install cors 安装依赖；
2、在入口文件中 import cors from 'cors'；
3、在所有路由注册前调用 app.use(cors())；
4、如需限制指定域名，传入配置对象：{ origin: 'https://your-frontend.com' }；
5、若需携带 Cookie，额外设置 { credentials: true } 并确保前端请求含 withCredentials: true。
五、PHP 接口脚本内嵌响应头声明
该方法适用于无框架 PHP 接口，通过在每个响应前插入 header() 指令实现最小侵入式跨域支持，适合轻量级后端或共享主机环境。
1、打开对应接口 PHP 文件（如 api.php）；
2、在 标签后第一行添加：header('Access-Control-Allow-Origin: *');；
3、紧接着添加：header('Access-Control-Allow-Methods: GET, POST, OPTIONS');；
4、补充：header('Access-Control-Allow-Headers: Content-Type, Authorization');；
5、在文件开头增加对 OPTIONS 请求的快速响应：if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { exit(); }。
