Node.js+TypeScript中Fetch请求遇CORS错误，浏览器直接访问正常

为什么直接访问API正常，Fetch请求却报CORS错误？ #

浏览器的同源策略仅限制页面中通过XMLHttpRequest/Fetch发起的跨域请求，直接在地址栏输入API地址属于浏览器的直接资源请求，不受同源策略管控。而你的前端页面（比如运行在localhost:3000）发起的Fetch请求，是从当前域名向API所在域名发送跨域请求，此时浏览器会要求API服务器返回CORS相关响应头（比如Access-Control-Allow-Origin），如果服务器没配置这些头，浏览器就会拦截请求并抛出CORS错误。

为什么用{mode: 'no-cors'}后无法访问响应体？ #

no-cors模式下，浏览器会将请求转为不透明响应（opaque response），这种响应的状态码为0，响应头和响应体都被浏览器屏蔽，无法读取。该模式仅适用于请求无需读取响应的资源（如图片、静态脚本），完全不适合获取JSON数据的场景。

可行的解决方案 #

1. 配置API服务器的CORS响应头 #

在API服务器端添加CORS相关响应头，以Node.js Express为例：

import express from 'express';
const app = express();

// 生产环境建议替换为具体前端域名，不要用*
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://你的前端域名');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 你的API路由
app.get('/feed', (req, res) => {
  res.json({ data: '你的JSON数据' });
});

app.listen(3001);

配置后，浏览器会认可跨域请求，你的Fetch代码就能正常读取响应体。

2. 前端使用反向代理 #

如果无法修改API服务器配置，可在前端开发环境中配置反向代理，将API请求转发到目标服务器，让前端请求变为同源请求。以Vite为例，在vite.config.ts中添加：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://目标API的完整域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

之后前端Fetch请求改为：

async function fetchFeed() {
  try {
    const response = await fetch('/api'); // 代理路径
    const posts = await response.json();
    console.log(posts);
  } catch (err) {
    console.log('获取帖子失败:', err);
  }
}

3. 确认调用场景：Node.js后端调用无需处理CORS #

如果是Node.js后端代码调用API（而非前端页面的Fetch），CORS限制完全不适用，直接使用node-fetch或axios即可：

import fetch from 'node-fetch';

async function fetchFeed() {
  try {
    const response = await fetch(`${BASIC_URL}`);
    const posts = await response.json();
    console.log(posts);
  } catch (err) {
    console.log('获取帖子失败:', err);
  }
}

内容的提问来源于stack exchange，提问作者IdoBa