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

Question

我正在尝试将 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 上收到此错误：

访问在“取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＆随机数= 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/') from origin 'null' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

服务器错误：

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

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

Answer 1

这是一个 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。邮递员说：“你知道吗，我不在乎你是否向不同的 API 发出请求。我不是浏览器，你可以做任何你想做的事。”

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

这就是要回答你的问题。