Как исправить ошибку CORS при получении данных API в моем приложении React?

Question

Я недавно загрузил свой проект ASp.NET CORE React с Redux (и KendoUI React) на свою хостинговую платформу Azure, и теперь я не могу получить доступ к любым данным, полученным из API. Я посмотрел на консоль и увидел сообщение об ошибке:

Доступ к выборке в 'https://login.microsoftonline.com/xxx-xxx-xxx-xxx-xxx/oauth2/authorize?client_id=xxx-xxx-xxx-xxx-xxx&redirect_uri=https%3A%2F%2Fmywebsite.azurewebsites.net%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=xxx.xxxstate=xxx-xxx-xxx-xxx-xxxxxx&x-client-SKU=ID_NET&x-client-ver=2.1.4.0' (перенаправлен из' https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20') из источника 'https://mywebsite.azurewebsites.net' заблокирован политикой CORS: нет' Access-Control-Allow-Origin ' Заголовок присутствует в запрашиваемом ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Я исследовал проблему с помощью поиска сообщения об ошибке, нашел несколько сообщений, но ничего конкретного о том, что делать в реагирующем приложении, которое является наилучшим, а также безопасным, нет.

Я добавил заголовок Access-Control-Allow-Origin: *, но это не сработало. Другой метод, который я нашел, заключался в использовании прокси-сервера, но в этом примере поддерживалась только локальная среда разработки.

Вот мой выбор, где вы можете видеть, что я добавил Access-Control-Allow-Origin к заголовкам:

fetchData(dataState) {
    const queryStr = `${toDataSourceRequestString(dataState)}`;
    const hasGroups = dataState.group && dataState.group.length;
    const base_url = 'api/MyData/GetMyData';
    const init = { method: 'GET', accept: 'application/json', headers: "Access-Control-Allow-Origin: *" };

    fetch(`${base_url}?${queryStr}`, init)
        .then(response => response.json())
        .then(({ Data, total }) => {
                this.setState({
                    result: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                    total,
                    dataState
                });
            }).catch(function (error) {
                console.log('Error: \n', error);
            });
};

Добавление заголовка ничего не изменило и ошибка не исчезла. Я хочу убедиться, что я делаю это правильно, кто-нибудь может мне помочь исправить эту ошибку?

Answer 1

Access-Control-Allow-Origin - заголовок ответа. Это может быть установлено только сервером. Сервер определяет, принимает ли он межсайтовые запросы, и в этом случае сервер говорит «нет». Обойти это невозможно.

Кажется, вы пытаетесь подключиться к серверу Azure, но он перенаправляет на страницу входа Microsoft. Убедитесь, что вы можете получить доступ к серверу без перенаправления при выполнении запроса. Также убедитесь, что ваш код JavaScript работает в том же домене (я предполагаю, что это так), в противном случае настройте CORS на веб-сервере: https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

Answer 2

Используйте https://cors-anywhere.herokuapp.com добавить это к вашему API

Например: https://cors-anywhere.herokuapp.com/user/list

Это публичный прокси, и нет контроля над тем, кто видит данные, не перегружайте прокси-сервер. лучше всего реализовать собственный прокси , если невозможно изменить Azure API.