时间戳

首页 > 解决方案 > 在 React App 的 Active Directory 插件上出现 CORS 错误

javascript - 在 React App 的 Active Directory 插件上出现 CORS 错误

问题描述

我正在尝试将 Active Directory ADAL 插件集成到我的 Reactjs 应用程序中，但在获取结果时出现 CORS 错误。

我一直在遵循React ADAL 包步骤，直到发现一个对我有很大帮助的SO 问题，但在获取 Dynamics CRM 数据时仍然出现 CORS 错误。

这是我的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 上收到此错误：

Access to fetch at ' 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' (redirected from ' https://myorg .api.crm2.dynamics.com/api/') from origin 'null' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

服务器错误：

index.js:1446 SERVER ERROR: TypeError: 无法获取

关于这里有什么问题的任何想法？提前致谢。

标签： javascriptreactjsazureactive-directorymicrosoft-dynamics

解决方案

这是一个 CORS 问题。CORS 代表跨域资源共享。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/发出请求

要记住的是，这是浏览器安全性。如果您在终端提交此请求表，例如 Postman 或 CURL。Postman 说：“你知道吗，我不在乎你是否向不同的 API 发出请求。我不是浏览器，你可以做任何你想做的事情。”

Postman 和类似的应用程序没有 CORS 的东西，所以他们不在乎。

这就是要回答你的问题。

推荐阅读