VSCode用Live Server打开HTML会因跨域被拦截，因前端地址http://127.0.0.1:5500与后端http://localhost:3000不同源；应改用Vite等dev server配proxy代理/api请求，或让Express托管HTML并启用cors中间件处理预检。
VSCode里直接跑HTML会触发跨域，不是代码问题而是运行环境
你在VSCode里用Live Server插件（比如按Alt+B）打开index.html，浏览器地址栏显示的是http://127.0.0.1:5500/xxx.html这类本地文件服务地址，而Node后端在http://localhost:3000——协议、域名、端口全不同，浏览器立刻拦截，报CORS error。这不是你fetch写错了，也不是后端没配cors，是根本没走到后端。
常见错误现象：
- 控制台报错：「Access to fetch at 'http://localhost:3000/api' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy」
- Network面板里请求状态是
(blocked:cors)，甚至没有发出去 -
node app.js已启动、curl http://localhost:3000/api能拿到数据，但前端就是404或跨域
解决思路只有一条：让前端请求的「发起源」和后端「同源」，或者让请求不经过浏览器同源检查。
最稳的做法是——别用Live Server开HTML，改用前端框架的dev server（如Vite/webpack devServer），它们自带代理能力；如果只是临时测接口，就手动把HTML扔进Node服务里托管，比如用express.static，这样页面和API都在localhost:3000下。
Vite或Vue CLI中配置proxy绕过浏览器CORS检查
开发阶段，前端工具链的代理是首选方案，它把/api开头的请求在本地转发到http://localhost:3000，浏览器看到的仍是同源请求，完全不触发CORS。
以Vite为例，在vite.config.js里加：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})关键点：
-
target必须写完整URL（含http://），不能只写localhost:3000 -
changeOrigin: true必须开启，否则Node后端收不到正确的Origin头，cors中间件可能拒绝请求 - 前端代码里仍调
fetch('/api/users')，不是fetch('http://localhost:3000/api/users') - 这个配置只在
vite dev时生效，build后失效，所以生产环境必须由后端配CORS
Express + cors中间件必须配对使用，单独设header容易漏预检
如果你坚持用原生Node或Express写后端，res.setHeader('Access-Control-Allow-Origin', '*')看似简单，但遇到带Authorization头或Content-Type: application/json的请求时，浏览器会先发OPTIONS预检，而你的路由没处理它，直接返回404或空响应，跨域就失败。
正确做法是用cors中间件，它自动处理预检：
const express = require('express')
const cors = require('cors')
const app = express()
<p>// 全局启用（开发可用，生产慎用）
app.use(cors())</p><p>// 或精确控制
const corsOptions = {
origin: ['<a href="https://www.php.cn/link/2d16ef569bb8d2fddf2e9b279f73e7f8">https://www.php.cn/link/2d16ef569bb8d2fddf2e9b279f73e7f8</a>'], // Vite默认端口
credentials: true // 若需带cookie，这里必须true，且origin不能为*
}
app.use(cors(corsOptions))</p><p>app.get('/api/data', (req, res) => {
res.json({ ok: true })
})注意：
-
credentials: true时，origin必须指定具体域名，不能用*，否则浏览器拒绝 - 中间件顺序很重要：
app.use(cors())必须放在所有路由之前，否则不起作用 - 如果用
app.all('*', ...)兜底处理OPTIONS，不如直接用cors，它更健壮
别在VSCode里配HTTP代理来解决跨域
settings.json里的http.proxy是给VSCode自身（比如插件市场、GitHub登录）用的，不是给网页里的fetch或XMLHttpRequest用的。你在VSCode里配了代理，前端JS发起的请求依然走浏览器网络栈，完全不受影响。
混淆点：
- VSCode代理 ≠ 浏览器代理 ≠ 前端开发服务器代理
- 试图用
http.proxy让fetch走代理，属于方向性错误 - 真要全局代理浏览器请求，得用系统级工具（Charles/Fiddler），但这是调试手段，不是开发方案
真正要盯住的只有两个地方：前端请求发往哪个URL、后端是否接受那个来源。其余全是干扰项。
