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

Недавно я загрузил свой проект 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);
            });
};

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


reactjs redux cors asp.net-core adal
person Yanayaya    schedule 25.04.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person gerwin    schedule 25.04.2019
comment
Это запутанное поведение, я уже вошел в систему, но он все еще пытается перенаправить на страницу входа. Это странно. Я использовал связанную документацию от Microsoft, но появляется та же ошибка. - person Yanayaya; 25.04.2019
comment
Да, это должно быть связано с вашим сервером. Если внимательно посмотреть на ошибку, там написано, что она была перенаправлена ​​с https://mywebsite.azurewebsites.net/api/MyData/GetMyData?page=1&pageSize=20. Это код вашего сервера. Скорее всего, вы допустили ошибку конфигурации, из-за которой никто не может получить доступ к вашему серверу без проверки подлинности Microsoft. Вы настроили безопасность в службе приложений? Что-то еще, что может вызвать такое поведение? Если вы сообщите мне фактическую конечную точку, я мог бы взглянуть. - person gerwin; 26.04.2019

arrow_upward
1
arrow_downward

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

eg: https://cors-anywhere.herokuapp.com/user/list

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

person Dheeraj    schedule 25.04.2019
comment
Обратите внимание, что по состоянию на январь 2021 года cors-anywhere теперь имеет строгие ограничения и больше не может быть допустимым решением. github.com/Rob--W/cors-anywhere/issues/301< /а> - person Neil Monroe; 08.03.2021