Получение ошибки CORS в плагине Active Directory для приложения React - PullRequest
Новая
       23

Получение ошибки CORS в плагине Active Directory для приложения React

0 голосов
/ 05 февраля 2019

Я пытаюсь интегрировать плагин Active Directory ADAL в мое приложение Reactjs, но я получаю ошибку CORS при получении результатов.

Я выполнял Пакет React ADAL шагов, пока не нашел ТАК вопрос , который мне очень помог, но все же я получаю ошибку CORS при получении данных Dynamics CRM.

Это часть моего MyComponent компонента: 

import React, { Component } from 'react';
import { adalApiFetch } from '../../../adalConfig';

class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.state = { APIResponse: '' };
        this.getLeads = this.getLeads.bind(this);
    }

    componentDidMount() {
        this.getLeads();
    }

    getLeads() {
        let result;

        /*(async () => {
            let response = await fetch('https://myorg.api.crm.dynamics.com/api/data/v9.1/leads');
            let data = await response.json();

            console.log(data);
        })();
        fetch('https://myorg.api.crm.dynamics/api/data/v9.1/leads')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => console.error('SERVER ERROR:', error));*/
        const options = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            mode: 'cors'
        };

        adalApiFetch(fetch, 'https://myorg.api.crm.dynamics/api/', options)
        .then(response => response.json())
        .then(data => {
            this.setState(Object.assign(this.state, { APIResponse: data }));
            console.log(data); 
        }).catch(error => console.error('SERVER ERROR:', error));

    }

    render() {
        return (
            <div>
                <h2>My Component</h2>
            </div>
        );
    }
}

export default MyComponent;

Я сохранил комментарии на случай, если вы предложите мне сделать запрос fetch с подходом ES7 вместо ES5 / 6.

Я получаю эту ошибкуна DevTools:

Доступ к выборке в 'https://login.microsoftonline.com//oauth2/authorize?client_id=0&response_mode=form_post&response_type=code+id_token&scope=openid+profile&state=OpenIdConnect.AuthenticationProperties%-SNnykyS3kfmCGv0ar3tRJMn0XvPSwEAAAABBBBBCS5yZWRpcmVgdClodHRwczovL25ld2NvMi5hcGkuY3JtMi5keW5hbWljcy5jb20vYXBpLw%26RedirectTo%3dhttps%253a%252f%252fmyorg.api.crm2.dynamics.com%252f&nonce=636848908126477531.RGFhOTkxMzQtqDRlYy00Nzk3LThkZDgtZjk5MjA5MDM3Nzk5MWQyMTE4OWQtODNjMy00YzhhLTk2YjMtMzY4MmQ0MzFkZjU5&redirect_uri=https%3a%2f%2fcloudredirector.crm2.dynamics.com%3a443%2fG%2fAuthRedirect%2fIndex.aspx&max_age=86400' (перенаправленный из' https://myorg.api.crm2.dynamics.com/api/') из источника 'null' был заблокирован политикой CORS: Ответчтобы предварительная проверка не прошла проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ удовлетворяет ваши потребности, установите режим запроса «no-cors», чтобы получитьресурс с отключенным CORS.

Ошибка сервера:

index.js: 1446 ОШИБКА СЕРВЕРА: Ошибка типа: Не удалось получить

Есть идеи о том, что здесь не так?Заранее спасибо.

1 Ответ

0 голосов
/ 06 февраля 2019

Это проблема CORS.CORS расшифровывается как Cross Source Resource Sharing.CORS - это функция безопасности, реализованная вашими браузерами.

Браузер увидит, что какой-то запрос Javascript попытался инициировать запрос в домен, отличный от того, в котором сейчас находятся браузеры.

Из-за этого наш браузер будет подозрительным, это поведение не может быть изменено, его жестко закодировано в каждом браузере.

До того, как браузер попытается сделать запрос, сам браузер выполнит начальный запрос к API (или предварительный просмотр).Вроде как:

"Эй, API, я пытаюсь сделать запрос на вас. Запрос приходит с веб-сайта some-domain.com, кажется странным, что вы думаете?"

В API есть возможность разрешить или запретить запрос.

В вашем случае ответ API: «Эй, браузер, я согласился с тобой, это кажется странным. Вы должны разрешить этот запрос, только если ты пришел с the-other-domain.com»

Ответ API затем возвращается в браузер.А затем браузер отвечает: «Эй, ты знаешь, что сервер говорит, что ты не можешь сделать запрос на них, пока ты на some-domain.com. Извините, код Javascript, нам не разрешено это делать».

Вот что сейчас происходит в вашем приложении.Браузер собирается проверить, есть ли другой домен, поддомен или порт.Если что-то из этого отличается, CORS включается. В вашем случае вы, вероятно, на localhost: XXX, и вы делаете запрос на https://myorg.api.crm.dynamics/api/

Следует иметь в виду, что это браузербезопасность.Если вы делаете эту форму запроса, например, Почтальон или CURL в Терминале.Почтальон говорит: «Вы знаете, мне все равно, если вы сделаете запрос к другому API. Я не браузер, и вы можете делать все, что захотите».

Почтальон и подобные приложения не имеют CORS, поэтому им все равно.

Вот что происходит, чтобы ответить на ваш вопрос.

...