Reactjs 当开发中没有问题时，React build会导致CORS错误

我已经构建了一个React应用程序（我的第一个React应用程序）和一个C#.NET Core 3.1 Web API，它为UI提供数据。我正在同一台服务器（Windows 10）上部署API和React应用程序，API的端口为3030，React生成的端口为3029，React生成是运行命令“npm run build”生成的。UI的IIS站点指向生成目录

在我的开发环境中，使用部署的API运行应用程序是可行的，不需要代理。部署时，我的屏幕将加载，但不会通过FETCH检索任何记录，而是出现CORS错误：

Access to fetch at 'http://localhost:3030/api/checking' from origin 'http://localhost:3029' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

为什么在用VisualStudio代码进行开发时，在热负载情况下运行时会起作用？为什么在部署后不起作用？更重要的是，我如何让它工作

Startup.cs中的API代码

配置服务方法

配置方法

AppSettings.js代码

  "AppSettings": {
    "CorsUrl": "http://localhost:3029"
  }

反应

我将我的url存储在根级别的.env文件中，如下所示

REACT_APP_API_URL=http://localhost:3030/api/checking

React Fetch命令

在我的checking.js组件中，加载数据并执行提取

const SERVER_URL=`${process.env.REACT_APP_API_URL}`

function Checking() {
  const [rowData, setRowData] = useState([]);
  const [newData, setNewData] = useState(initialState);
  const [displayModal, setModalDisplay] = useState(false);
  const columnDefinitions = Columns();
  const rowDataRef = useRef(rowData);

  useEffect(() => {
    fetch(SERVER_URL)
      .then((response) => response.json())
      .then((rowData) => {
        setRowData(rowData)
        rowDataRef.current = rowData;
      });
  }, []);
.
.
.

---

您需要设置Access Control Allow Origin标头。请尝试以下方法来解决此错误

1.清除Cookie并通过Mod Header扩展添加访问控制允许源“：”*”和 请再次尝试检查修复程序

2.尝试使用中间界面来控制您的请求并引导他们 进入特别规则

 app.use((req, res, next) => {
          res.header('Access-Control-Allow-Origin', '*');
          next();
        });

---

事实证明，我注意到一个组件行为异常（ag网格），这导致我运行npm更新。完成后，我重新部署了构建，现在一切正常。我相信更新“修复”了这个问题。

Hi@samwu-您能解释一下为什么在开发环境中不需要这样做吗？我对这一点的实施也有点困惑。您的示例中的应用程序是什么？这是FETCH命令的一部分吗？@sawwu，请看我的API设置-我允许端口3029上的react应用程序访问。这就是使开发模式在没有代理的情况下工作的原因。令人费解的是为什么生产不起作用。npm运行构建是否需要一些神奇的设置来实现这一点？

const SERVER_URL=`${process.env.REACT_APP_API_URL}`

function Checking() {
  const [rowData, setRowData] = useState([]);
  const [newData, setNewData] = useState(initialState);
  const [displayModal, setModalDisplay] = useState(false);
  const columnDefinitions = Columns();
  const rowDataRef = useRef(rowData);

  useEffect(() => {
    fetch(SERVER_URL)
      .then((response) => response.json())
      .then((rowData) => {
        setRowData(rowData)
        rowDataRef.current = rowData;
      });
  }, []);
.
.
.

 app.use((req, res, next) => {
          res.header('Access-Control-Allow-Origin', '*');
          next();
        });