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

Question

我构建了一个 React 应用程序（我的第一个 React 应用程序）和一个为 UI 提供数据的 C#.NET Core 3.1 Web API。我正在同一台服务器 (Windows 10) 上部署 API 和 React 应用程序，API 的端口 3030 和生成的 React 构建的端口 3029 运行命令“npm 运行 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.

为什么当运行在开发中使用热加载的 Visual Studio 代码退出 React 时，为什么这会起作用？为什么在部署后这不起作用？更重要的是，我该如何让它发挥作用？

API 代码来自 Startup.cs

ConfigureServices 方法

services.AddCors(options => {
    options.AddDefaultPolicy(builder => {
        builder.WithOrigins(Configuration["AppSettings:CorsUrl"])
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});

配置方法

app.UseCors();

AppSettings.js代码

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

反应

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

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

React Fetch 命令

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

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;
      });
  }, []);
.
.
.

Answer 1

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

1.Clear 您的 cookie 并添加 Access-Control-Allow-Origin': '*' by Mod Header extension and 再次尝试检查修复。

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

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

Answer 2

事实证明，我注意到一个组件行为不正常 (ag-grid)，这导致我运行 npm 更新。完成后，我重新部署了构建，现在一切正常。我相信更新 'fixed' 问题。

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

React build causes CORS error when there were no issues in development

iis

reactjs

npm-run

asp.net-core-webapi