使用bot在本地测试时向已知用户发送通知时出现“Access-Control-Allow-Origin”错误

Question

我正在尝试使用bot框架从我本地加载的Teams选项卡发送用户通知

1. 我创建了bot并部署到Azure
2. 机器人可以使用示例代码正常工作，以回复发送给它的任何用户。
3. 但是当我尝试在Teams选项卡中使用一个按钮（我写这个来测试发送通知）来触发向用户发送通知的事件时，控制台日志显示了我的错误：

Failed to load https://login.microsoftonline.com/botframework.com/oauth2/v2.0/token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://c78cf14b.ngrok.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM27 bundle.js:160028 ERROR: ChatConnector: startConversation - error starting conversation.
__stack_frame_overlay_proxy_console__ @ VM27 bundle.js:160028
error @ VM27 bundle.js:30562
(anonymous) @ VM27 bundle.js:23677
(anonymous) @ VM27 bundle.js:24109
(anonymous) @ VM27 bundle.js:24198
(anonymous) @ VM27 bundle.js:24166
(anonymous) @ VM27 bundle.js:24160
tryCallOne @ VM27 bundle.js:32455
(anonymous) @ VM27 bundle.js:32541
flush @ VM27 bundle.js:11479
characterData (async)
requestCall @ VM27 bundle.js:11574
rawAsap @ VM27 bundle.js:11443
handleResolved @ VM27 bundle.js:32531
handle @ VM27 bundle.js:32527
finale @ VM27 bundle.js:32593
reject @ VM27 bundle.js:32589
(anonymous) @ VM27 bundle.js:32625
(anonymous) @ VM27 bundle.js:24152
self.callback @ VM27 bundle.js:176800
./node_modules/events/events.js.EventEmitter.emit @ VM27 bundle.js:55618
./node_modules/request/request.js.Request.onRequestError @ VM27 bundle.js:177496
./node_modules/events/events.js.EventEmitter.emit @ VM27 bundle.js:55618
(anonymous) @ VM27 bundle.js:210914
Promise rejected (async)
./node_modules/stream-http/lib/request.js.ClientRequest._onFinish @ VM27 bundle.js:210908
(anonymous) @ VM27 bundle.js:210813
./node_modules/events/events.js.EventEmitter.emit @ VM27 bundle.js:55615
finishMaybe @ VM27 bundle.js:172091
afterWrite @ VM27 bundle.js:171953
afterTick @ VM27 bundle.js:133523
./node_modules/process/browser.js.Item.run @ VM27 bundle.js:133693
drainQueue @ VM27 bundle.js:133663
setTimeout (async)
runTimeout @ VM27 bundle.js:133581
./node_modules/process/browser.js.process.nextTick @ VM27 bundle.js:133683
nextTick @ VM27 bundle.js:133522
onwrite @ VM27 bundle.js:171941
WritableState.onwrite @ VM27 bundle.js:171641
./node_modules/stream-http/lib/request.js.ClientRequest._write @ VM27 bundle.js:211026
doWrite @ VM27 bundle.js:171889
writeOrBuffer @ VM27 bundle.js:171878
./node_modules/readable-stream/lib/_stream_writable.js.Writable.write @ VM27 bundle.js:171795
./node_modules/request/request.js.Request.write @ VM27 bundle.js:178115
end @ VM27 bundle.js:177164
(anonymous) @ VM27 bundle.js:177193
run @ VM27 bundle.js:198280
runIfPresent @ VM27 bundle.js:198309
onGlobalMessage @ VM27 bundle.js:198349
postMessage (async)
registerImmediate @ VM27 bundle.js:198360
setImmediate @ VM27 bundle.js:198267
./node_modules/request/request.js.Request.init @ VM27 bundle.js:177138
Request @ VM27 bundle.js:176742
request @ VM27 bundle.js:173150
refreshingToken.Promise.catch._this.refreshingToken @ VM27 bundle.js:24138
tryCallTwo @ VM27 bundle.js:32463
doResolve @ VM27 bundle.js:32618
Promise @ VM27 bundle.js:32484
./node_modules/botbuilder/lib/bots/ChatConnector.js.ChatConnector.refreshAccessToken @ VM27 bundle.js:24126
./node_modules/botbuilder/lib/bots/ChatConnector.js.ChatConnector.getAccessToken @ VM27 bundle.js:24165
./node_modules/botbuilder/lib/bots/ChatConnector.js.ChatConnector.addAccessToken @ VM27 bundle.js:24189
./node_modules/botbuilder/lib/bots/ChatConnector.js.ChatConnector.authenticatedRequest @ VM27 bundle.js:24078
./node_modules/botbuilder/lib/bots/ChatConnector.js.ChatConnector.startConversation @ VM27 bundle.js:23653
(anonymous) @ VM27 bundle.js:25581
./node_modules/botbuilder/lib/bots/UniversalBot.js.UniversalBot.tryCatch @ VM27 bundle.js:25654
./node_modules/botbuilder/lib/bots/UniversalBot.js.UniversalBot.ensureConversation @ VM27 bundle.js:25575
async.eachLimit.errorLogger._this.tryCatch.channelId @ VM27 bundle.js:25340
(anonymous) @ VM27 bundle.js:31303
replenish @ VM27 bundle.js:31441
(anonymous) @ VM27 bundle.js:31452
./node_modules/botbuilder/node_modules/async/lib/async.js.async.forEachLimit.async.eachLimit @ VM27 bundle.js:31342
./node_modules/botbuilder/lib/bots/UniversalBot.js.UniversalBot.send @ VM27 bundle.js:25339
HomePage.buttonClicked @ VM27 bundle.js:220799
BaseButton._this._onClick @ VM27 bundle.js:99242
callCallback @ VM27 bundle.js:138209
invokeGuardedCallbackDev @ VM27 bundle.js:138259
invokeGuardedCallback @ VM27 bundle.js:138316
invokeGuardedCallbackAndCatchFirstError @ VM27 bundle.js:138330
executeDispatch @ VM27 bundle.js:138621
executeDispatchesInOrder @ VM27 bundle.js:138643
executeDispatchesAndRelease @ VM27 bundle.js:138740
executeDispatchesAndReleaseTopLevel @ VM27 bundle.js:138748
forEachAccumulated @ VM27 bundle.js:138722
runEventsInBatch @ VM27 bundle.js:138876
runExtractedEventsInBatch @ VM27 bundle.js:138884
handleTopLevel @ VM27 bundle.js:142880
batchedUpdates$1 @ VM27 bundle.js:156992
batchedUpdates @ VM27 bundle.js:140210
dispatchEvent @ VM27 bundle.js:142959
interactiveUpdates$1 @ VM27 bundle.js:157047
interactiveUpdates @ VM27 bundle.js:140229
dispatchInteractiveEvent @ VM27 bundle.js:142936
VM27 bundle.js:160028 TypeError: Failed to fetch

代码段：

    private buttonClicked = () => {
        const address =
        {
            channelId: 'msteams',
            user: { id: '{myUserId}' },
            channelData: {
                tenant: {
                    id: '{myTenantId}'
                }
            },
            notification: {
                alert: true
            },
            bot:
            {
                id: '{mybotid}',
                name: 'Test Bot'
            },
            serviceUrl: 'https://smba.trafficmanager.net/amer/'
        }
        const connector = new builder.ChatConnector({
            appId: process.env.MicrosoftAppId,
            appPassword: process.env.MicrosoftAppPassword,
        });
        const bot = new builder.UniversalBot(connector);
        const msg = new builder.Message().address(address);
        msg.text('Hello, this is a notification');
        msg.summary('This is  a summary');
        bot.send(msg);
    }

看起来我需要设置Bearer令牌：https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#get-conversation-members

但是在发送消息时应该如何设置呢？

任何帮助表示赞赏！

Answer 1

您的设置有点神秘，但听起来您尝试通过ngrok将本地运行的Teams实例连接到Azure部署的bot。如果是这种情况，那么您需要在机器人上启用CORS以接受您的本地主机地址。

为此，请为已部署的bot打开Azure资源组。然后，选择App Service

接下来，在左侧菜单中，向下滚动到API部分并选择“CORS”

最后，

• 选中“启用Access-Control-Allow-Credentials”复选框，然后选中
• 将您的本地主机地址添加到列表中
• 单击保存

如果您的localhost经常更改，请阅读复选框上方列出的说明（如果您使用免费的ngrok服务，可能就是这种情况）。

希望有所帮助！