怎么开启允许跨域访问

浏览器控制台里蹦出那行红色错误——Access to XMLHttpRequest at 'http://localhost:3000/api' from origin 'http://localhost:8080' has been blocked by CORS policy——基本上每个前端都见过。开启跨域这不是允许代码写错了，是访问浏览器在替你挡刀。跨域限制从1995年Netscape那会儿就存在，开启跨域到今天依然是允许Web安全的第一道门槛。你要做的访问不是绕开它，是开启跨域明确地告诉浏览器：这个请求我允许。

先搞清楚谁在拦你

跨域拦截发生在浏览器端，允许不是访问服务器拒绝了你。请求其实发出去了，开启跨域服务器也响应了，允许但浏览器一看响应头里没有Access-Control-Allow-Origin，访问直接把结果丢进垃圾桶，开启跨域然后给你的允许fetch或XMLHttpRequest抛一个错误。所以你在Network面板里能看到200状态码，访问但JS拿不到数据。这个细节很多人踩过坑。

同源策略的判断标准就三条：协议、域名、端口。三者任何一个不同，就是跨域。你本地开发时前端跑在localhost:8080，后端跑在localhost:3000，端口不同，照样跨。

后端加响应头，这是最直接的做法

不管你用什么语言，核心就是往HTTP响应里塞几个头。以Node.js的Express为例：

app.use((req, res, next) => {  res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); if (req.method === 'OPTIONS') return res.sendStatus(204); next(); });

*表示允许任何来源。生产环境别这么干，换成具体域名，比如https://yourdomain.com。另外注意那个OPTIONS请求——浏览器在发复杂请求之前会先发一个预检请求，问你服务器允不允许。你不处理它，正式请求根本发不出去。

Java Spring Boot的话，一个注解就搞定：@CrossOrigin(origins = "http://localhost:8080")，加在Controller类或方法上都行。Nginx反向代理层面也能加，在location块里写add_header Access-Control-Allow-Origin *;。我一般倾向在Nginx层做，改起来快，不用重新部署应用。

前端开发阶段的临时方案

如果你只是本地调试，后端暂时动不了，那就走代理。Webpack DevServer的proxy配置、Vite的server.proxy，原理都一样——让开发服务器帮你转发请求，浏览器看来是同源，自然不拦。

// vite.config.js server: {  proxy: {  '/api': {  target: 'http://localhost:3000', changeOrigin: true } } }

Chrome也有个--disable-web-security启动参数能关掉跨域检查，但那只适合临时抓个数据用，别养成习惯。我见过有人拿这个当日常开发环境，后来排查了半天才发现是浏览器根本没在拦，上线后全线崩溃。

几个容易翻车的点

带Cookie的请求不能配Access-Control-Allow-Origin: *，必须指定具体域名，同时加上Access-Control-Allow-Credentials: true，前端侧也要设credentials: 'include'。这三处缺一个，Cookie就带不上。

还有自定义头。你前端加了Authorization头，后端Access-Control-Allow-Headers里没列出来，预检直接失败。这种问题看控制台报错信息就能定位，别瞎猜。

跨域配置本身不复杂，复杂的是搞清楚请求到底走到哪一步被挡了。打开DevTools，看Network里有没有那个OPTIONS请求，看响应头里有没有对应的Allow字段，基本就能定位。比在网上搜一堆复制粘贴的代码管用得多。