已启用CORS仍无法从NestJS后端取数，NextJS前端该如何解决？

核心问题：CORS配置的URL格式错误 #

你当前NestJS的CORS配置中，origin数组里的URL缺少双斜杠（http:localhost:3000 → http://localhost:3000），这会导致浏览器无法匹配跨域规则，直接触发CORS错误。

正确的CORS配置方案 #

修改main.ts中的CORS配置，修正URL格式并补充必要的方法声明：

app.enableCors({
  origin: ['http://localhost:3000', 'http://localhost:3000/testpage'],
  allowedHeaders: 'Content-Type',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS', // 显式允许所有常用HTTP方法
});

如果选择在创建应用时直接配置CORS，确保语法正确：

const app = await NestFactory.create(AppModule, {
  cors: {
    origin: ['http://localhost:3000'],
    allowedHeaders: 'Content-Type',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
  },
});

前端请求优化（非CORS问题，但提升可靠性） #

既然后端返回JSON格式数据，建议将res.text()改为res.json()，同时添加错误捕获：

async function handleClick() {
  try {
    const res = await fetch('http://127.0.0.1:7777/api-json', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json' // 与返回类型匹配更合理
      }
    });
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    const json = await res.json();
    console.log(json);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

额外排查步骤 #

• 确认NestJS服务确实运行在127.0.0.1:7777，且/api-json接口能正常返回数据
• 打开浏览器开发者工具的Network标签，查看OPTIONS预检请求的响应头是否包含Access-Control-Allow-Origin: http://localhost:3000
• 若使用NextJS 13+ App Router，可考虑通过API Route作为代理转发请求，彻底规避跨域问题

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