Ошибка CORS при обновлении страницы в .NET приложении, работающем на IIS

Вопрос или проблема

Доступ к XMLHttpRequest по адресу 'localhost:55000/employees/getEmployees' с источника 'http://localhost:55000' был заблокирован политикой CORS: Запросы с других источников поддерживаются только для протоколов: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

private void configureCors(IServiceCollection services)
{
    var clientAddresses = Configuration.GetSection("ClientAddress")
       .Get<string[]>();

    services.AddCors(options =>
    {
        options.AddPolicy(name: VUE_CORS,
            builder =>
            {
                builder.WithOrigins(clientAddresses)
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });
}

getEmployees (searchData) {
      this.$http()
        .get('/employees', { params: searchData })
        .then(({ data }) => {
          this.tblEmployeeData = data
        })
    },

.

Ответ или решение

Ошибка CORS при обновлении страницы в .NET приложении, работающем на IIS

Работа с CORS (Cross-Origin Resource Sharing) может стать причиной неожиданных сложностей при разработке веб-приложений, особенно когда комбинируются клиентские и серверные технологии, такие как Vue.js и .NET, развернутые на IIS. В данном случае мы рассмотрим проблему, с которой вы столкнулись — ошибка CORS на этапе обновления страницы.

Проблема

Ваше приложение, разработанное на Vue.js и работающей с .NET, начинает выдавать ошибку CORS при обновлении страницы. Эта проблема возникает только в случаях, когда пользователь обновляет страницу, а не при первоначальном обращении к API. При этом в консоли браузера появляется следующее сообщение об ошибке:

Access to XMLHttpRequest at 'localhost:55000/employees/getEmployees' from origin 'http://localhost:55000' has been blocked by CORS policy: Cross-origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Возможные причины проблемы

Причины возникновения ошибки CORS могут быть разнообразными. В вашем случае необходимо рассмотреть несколько ключевых аспектов:

1. Настройка CORS в .NET: Ваша конфигурация CORS кажется правильной на первый взгляд, но важно проверить, какие адреса передаются из конфигурации ClientAddress.

2. Проблемы с URL: Убедитесь, что при обновлении страницы URL, по которому осуществляется попытка обращения к вашему API, идентичен тому, который используется при первоначальной загрузке приложения.

3. Отсутствие рядом с конфигурацией CORS: Возможно, CORS не правильно применяется к специфическим маршрутам или методам, если вы применяете CORS только к определенным контроллерам.

Решения

Вот несколько шагов, которые помогут вам устранить проблему:

1. Проверка конфигурации CORS: Убедитесь, что в вашем конфигурационном файле (например, appsettings.json) клиентский адрес правильно определён и соответствует тому, с какого вы делаете запросы. Возможно, вам следует попробовать произвести отдельные тесты с другими адресами.

2. Проверка применения CORS: Убедитесь, что ваша политика CORS применяется на уровне сервиса, например:

   public void Configure(IApplicationBuilder app, IHostingEnvironment env)
   {
      app.UseCors(VUE_CORS);
      // другие middleware
   }

3. Настройка прокси в Vue.js: Проверьте, правильно ли настроен начальный URL в вашей конфигурации Axios. В некоторых случаях может помочь использование свойства baseURL в Axios для устранения проблем с CORS при обращениях к локальному серверу.

4. Логи ошибок: Включите логирование запросов на сервере, чтобы отслеживать, когда именно запросы блокируются. Это позволит лучше понять связь между запросами и ошибками.

5. Тестирование различных методов: Попробуйте использовать другие HTTP-методы и убедитесь, что все необходимые методы (POST, PUT, DELETE и т.д.) разрешены в вашей CORS-политике.

6. Актуализация пакетов: Убедитесь, что все используемые пакеты и версии .NET обновлены до последних. Иногда несовместимости версий могут быть причиной неожиданных ошибок.

Заключение

Ошибки, связанные с CORS, могут быть сложными и изнурительными, но ключ к их решению часто заключается в тщательной проверке конфигурации и корректной настройке. Попробуйте предложенные пути решения, и, скорее всего, вы сможете устранить проблему с обновлением страницы. Если проблема сохранится, стоит рассмотреть возможность использования внешних инструментов для отладки или обратиться за помощью к сообществу разработчиков.