0

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

为什么在热负载的 Visual Studio Code 开发中运行 React 时这会起作用，为什么在部署后这不起作用？更重要的是，我如何让它发挥作用？

来自 Startup.cs 的 API 代码

配置服务方法

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

反应获取命令

在我的 checks.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;
      });
  }, []);
.
.
.
4

2 回答 2

0

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

1.清除您的cookies并通过Mod Header扩展添加Access-Control-Allow-Origin': '*'并再次尝试检查修复。

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

 app.use((req, res, next) => {
          res.header('Access-Control-Allow-Origin', '*');
          next();
        });
于 2020-10-30T04:29:56.320 回答
0

事实证明，我注意到一个组件行为不端（ag-grid），这导致我运行 npm update。完成后，我重新部署了构建，现在一切正常。我相信更新“解决了”这个问题。

于 2020-11-01T22:00:48.587 回答