Блог

Я создал приложение React (мое первое приложение React) и C#.NET Ядро 3.1 Веб-API, которое передает данные в пользовательский интерфейс. Я развертываю API и приложение React на одном сервере (Windows 10) с портом 3030 для API и портом 3029 для сборки React, которая была сгенерирована при выполнении команды «npm run build». Сайт IIS для пользовательского интерфейса был указан в каталоге сборки.

В моей среде разработки запуск приложения с использованием развернутого API работает, и прокси-сервер не требуется. При развертывании мой экран загружается, но никакие записи не извлекаются с помощью ВЫБОРКИ, и вместо этого возникает ошибка 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.
  

Почему это работает при запуске React при разработке из кода Visual Studio с горячей загрузкой и почему это не работает после развертывания? Что еще более важно, как мне заставить это работать?

Код 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 компонент, данные загружаются и выполняется ВЫБОРКА.

 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 и добавьте Access-Control-Allow-Origin’: ‘*’ по расширению заголовка Mod и повторите попытку, чтобы проверить исправление.

2. Попробуйте использовать промежуточный интерфейс для управления вашим запросом и направлять их в специальные правила.

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

Оказывается, я заметил неправильное поведение компонента (ag-grid), и это заставило меня запустить обновление npm. Как только это было завершено, я повторно запустил сборку, и теперь все работает. Я считаю, что обновление «исправило» проблему.