对应用做出反应的Active Directory插件获取CORS错误

问题描述 投票:0回答:1

我想我的Reactjs应用程序中的Active Directory ADAL插件整合,但取结果时,我得到CORS错误。

我下面React ADAL package步骤,直到我发现了一个SO question它帮了我很多,但还是我得到一个错误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;

我不停的意见的情况下,你建议我做与ES7方法取代ES5 / 6 fetch请求。

我得到的DevTools此错误:

访问在取“https://login.microsoftonline.com/ /的oauth2 /授权?CLIENT_ID = 0&response_mode = form_post&RESPONSE_TYPE =代码+ id_token&范围= +的OpenID轮廓&状态= OpenIdConnect.AuthenticationProperties%-SNnykyS3kfmCGv0ar3tRJMn0XvPSwEAAAABBBBBCS5yZWRpcmVgdClodHRwczovL25ld2NvMi5hcGkuY3JtMi5keW5hbWljcy5jb20vYXBpLw%26RedirectTo%3dhttps%253A%252F%252fmyorg.api.crm2.dynamics.com% 252F&随机数= 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/')从原点 '空' 已被阻止通过CORS政策:响应预检请求未通过访问控制检查:否“访问控制允许来源”标题存在于所请求的资源。如果一个不透明的响应提供您的需求,设置请求的模式,以“无CORS”获取禁用CORS的资源。

服务器错误:

index.js:1446服务器错误:类型错误:无法抓取

对什么是错在这里的任何想法?提前致谢。

javascript reactjs azure active-directory microsoft-dynamics
1个回答
3
投票

这是一个CORS问题。 CORS代表跨源资源共享。 CORS是你的浏览器中实现安全功能。

浏览器会看到一些JavaScript请求已尝试启动比浏览器目前处于什么不同域的请求。

正因为如此我们的浏览器将是可疑的,这种行为不能被改变,它很难在每一个浏览器编码。

浏览器试图使请求本身会做的API一个初始请求的浏览器之前(又名预检)。有点像:

“嘿API,我想提出一个要求过你,请求从一个网站来在some-domain.com,它似乎很奇怪,你怎么看?”

该API具有选项,以允许或不允许的请求。

在你的情况下,API响应:“嘿浏览器,我同意你的观点,这似乎很奇怪,您应该仅允许该请求,如果您从the-other-domain.com的到来。”

然后,API响应返回给浏览器。然后在浏览器回说:“嘿,你知道吗,服务器说,你不能在some-domain.com在,而你提出请求交给他们。对不起Javascript代码我们不可以这样做。”

这就是现在在应用程序中发生的事情。浏览器是要检查是否有不同的域名,子域名或端口。如果这些事情都不同,CORS踢你的情况,你可能是在本地主机:XXX,你正在对https://myorg.api.crm.dynamics/api/请求

要记住一件事是,这是一个浏览器的安全性。如果您在终端申请表格e.g邮差或卷曲。邮递员说:“你知道吗,如果您对不同的API请求我不在乎我不是浏览器,你可以做任何你想要的。”

邮差和类似用途没有CORS的东西,所以他们根本不在乎。

这是怎么回事回答你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.