javascript - Azure 聊天机器人 token 服务器

Question

我有一个 azure 的聊天机器人，我通过直线 channel 使用它。如果我直接在 HTML 中使用 key ，则工作正常，但出于安全原因，我想使用 token 。这就是我使用它的原因:

<script>

    window
        .fetch('http://XXXXXXXX.azurewebsites.net/token-generate', 
        { 
            method: 'POST'
        })
        .then(function(res) {
          return res.json();
        })
        .then(function(json) {
          const token = json.token;

        window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({
                  token: token
                })
              }, 
              document.getElementById('webchat'));
              document.querySelector('#webchat > *').focus();
            });

    </script>

就像那样，而不是使用异步函数，因为它也需要在 IE11 上工作。

我的机器人中的 index.js 如下所示:

// Create HTTP server
const server = restify.createServer({
  name: 'token-server'
});
server.listen(process.env.port || process.env.PORT || 3978, function() {
    console.log(`\n${ server.name } listening to ${ server.url }`);
    console.log('\nGet Bot Framework Emulator: https://aka.ms/botframework-emulator');
    console.log('\nTo talk to your bot, open the emulator select "Open Bot"');
});

server.post('/token-generate', async (_, res) => {
  console.log('requesting token ');
  res.setHeader('Access-Control-Allow-Origin', '*');
  console.log(res);

  try {
    const cres = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
      headers: { 
        authorization: `Bearer ${ process.env.DIRECT_LINE_SECRET }`
      },
      method: 'POST'
    });
 //   console.log(cres);
    const json = await cres.json();
 //   console.log(json);
   // json.header.append('Access-Control-Allow-Origin: *');
    console.log(json);

    if ('error' in json) {
      res.send(500);
    } else {
      res.send(json);
    }
  } catch (err) {
    res.send(500);
  }
});

这是我在研究如何使用 token 来呈现网络聊天后发现的一些代码。

我的问题是，当我使用这个 html 代码时，我收到一些错误:

Access to fetch at 'http://compliancebotbbraun-bot.azurewebsites.net/token-generate' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
testbot.html:1 Uncaught (in promise) TypeError: Failed to fetch

我只是不知道如何更改 Access-Control-Allow-Origin header 。我在网上找不到任何东西，即使我找到了一些东西，它也与我的代码相差甚远。它的工作原理与我想象的在 IE11 中工作完全一样，但在 Chrome、Edge 和 Firefox(其他人不知道，只测试了这些)中，会发生这些错误。

我希望有人能帮助我。

Answer 1

根据我的理解，您公开了一个 API，通过向机器人客户端发送方法向机器人客户端授予访问 token 。您的机器人客户端使用 JS 脚本来调用此 API。由于您使用的是 post 方法，因此您的机器人客户端将遇到 CORS 问题。

基于 /token-generate url 的宿主，该 API 托管在 Azure webapp 上，您可以引用 this doc定义允许的域通过 Azure 门户上的 JS 直接从静态页面调用此 API。

您可以在此处找到托管您的 API 代码的 Azure Web 应用程序:

并在此处打开 CORS 设置:

如果您只是从本地静态 html 文件测试您的机器人，添加“*”并删除 CORS 配置中的其他域将解决此问题。

测试结果:

希望有帮助。如果您还有任何疑问，请随时告诉我。