使用 ReactJS 和 NodeJS Web APP 的 Bot FrameWork Edge 40.15063.674.0 问题答案

【问题标题】：Bot FrameWork Edge 40.15063.674.0 Issue using ReactJS and NodeJS web APP使用 ReactJS 和 NodeJS Web APP 的 Bot FrameWork Edge 40.15063.674.0 问题
【发布时间】：2019-12-11 20:56:26
【问题描述】：

您好，我在 Azure Web 应用程序中使用 Nodejs 和 reactjs 实现了机器人框架。该代码在 Edge（Microsoft Edge 44.17763.1.0）、Chrome 和 IE 中运行良好，我收到 edge 版本附带的错误 Edge40.15063.674.0。此应用已通过 AAD 身份验证，因此我们能够获取已登录的用户。

下面是我们得到的错误信息

SEC7120：来源https://botsite.azurewebsites.net 在 Access-Control-Allow-Origin 标头中找不到。

<!DOCTYPE html>
    <html lang="en-US">
    <head>
        <title>Web Chat: Full-featured bundle with ES5 polyfills</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
          This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
          https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
        -->
        <script src="webchat-es5.js"></script>
        <style>
            html, body {
                height: 100%
            }

            body {
                margin: 0
            }

            #webchat {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="webchat" role="main"></div>
        <script>
            const settings = {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Access-Control-Request-Headers': 'X-Requested-With',
                    'Access-Control-Allow-Origin': 'https://agnappprodsmartassistance.azurewebsites.net',
                    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
                }
            };
            var loginID = '';

            window.fetch('/.auth/me', settings).then(function (response) { return response.json() }).then(function (responseData) {
                 loginID = responseData[0].user_id;
                responseFromAuthCall = encodeURIComponent(responseFromAuthCall);
            }).then(function (test) {
                window.fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
                    method: 'POST', headers: {
                        'Authorization': 'Bearer 8rV5oplNFL0.cwA.N9c.dQi5utdOwX8-qH_9Nh4a1DzRxGRRFAV64n7P5mgiyAM',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Access-Control-Request-Headers': 'X-Requested-With',
                    },

                    body: JSON.stringify({
                        accessLevel: 'View',
                        allowSaveAs: 'false',
                    })
                })
                    .then(function (res) {
                        return res.json();
                    })
                    .then(function (json) {
                        const token = json.token;
                        var dl = window.WebChat.createDirectLine({ token: token })
                        window.WebChat.renderWebChat({
                            userID: loginID,
                            directLine: dl,
                        }, document.getElementById('webchat'));
                        document.querySelector('#webchat > *').focus();
                    });
            });
        </script>
    </body>
    </html

【问题讨论】：

标签： node.js reactjs azure botframework

【解决方案1】：

网络聊天仅支持最后两个版本的 Edge (v42https://github.com/microsoft/BotFramework-WebChat#browser-compatibility

【讨论】：