React App.js async函数内const赋值不支持报错求解

该报错和后端CORS配置无关联，核心是违反JavaScript基础语法规则：
const关键字声明的变量为块级常量，一旦声明完成就不允许重复声明、重新赋值，这个规则在同步代码、async异步代码块中完全一致，不存在“async函数内部不支持const赋值”的特殊限制。

典型错误场景 #

你在App.js的异步逻辑中大概率写了两类错误代码：

1. 重复用const声明同名变量

   // 错误示例
   async function loadData() {
     const resp = await fetch('http://localhost:3000/api/list');
     const resp = await resp.json(); // 重复用const声明已存在的resp变量
   }
   

2. 给const声明的变量重新赋值

   // 错误示例
   async function loadData() {
     const dataList = [];
     const resp = await fetch('http://localhost:3000/api/list');
     dataList = await resp.json(); // 给const声明的dataList重新赋值
   }
   

• 针对重复声明同名变量的问题：给不同阶段的返回值定义不同的变量名即可

  // 正确示例
  async function loadData() {
    const resp = await fetch('http://localhost:3000/api/list');
    const dataList = await resp.json(); // 换用新的变量名接收解析结果
    console.log(dataList);
  }
  

• 针对需要反复修改值的变量：将声明关键字从const改为let，let声明的变量支持后续重新赋值

  // 正确示例
  async function loadData() {
    let dataList = [];
    const resp = await fetch('http://localhost:3000/api/list');
    dataList = await resp.json();
    return dataList;
  }
  

语法错误修复完成后，可按以下规则校验后端CORS配置是否生效：

• 确保server.js中cors中间件注册在所有业务路由之前，参考配置：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  // cors注册必须放在路由前面
  app.use(cors());
  // 后续再注册业务接口
  app.get('/api/list', (req, res) => {
    res.json({ code: 0, data: [] })
  })
  app.listen(3000);
  

• 前端请求的后端地址、端口要和后端服务实际监听的地址端口完全一致，避免跨域请求发错地址。

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