Bot Framework Webchat 无法从 Node.js restify 服务器（在 Azure 上）获取令牌：CORS 策略：不存在“Access-Control-Allow-Origin

Posted 2023-03-03

【中文标题】Bot Framework Webchat 无法从 Node.js restify 服务器（在 Azure 上）获取令牌：CORS 策略：不存在“Access-Control-Allow-Origin”标头

【英文标题】：Bot Framework Webchat unable to get token from Node.js restify server (on Azure): CORS policy: No 'Access-Control-Allow-Origin' header is present

【发布时间】：2019-11-27 06:02:11

【问题描述】：

要启动 Bot Framework 网络聊天客户端，我需要从运行在 Azure 中的 restify 服务器“获取”一个令牌。服务器从https://webchat.botframework.com/api/tokens 获取令牌（使用我的秘密）。最后一部分工作正常。第一部分没有。我没有设法让网络聊天客户端接受来自 restify 服务器的响应。离线（本地主机）工作正常。当服务器在线运行时（Azure 中的节点），我得到：

CORS 策略阻止了从源“https://mydomainname.com”获取“https://mybot.azurewebsites.net/api/token”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。

在 chrome 的开发工具中，我可以看到在本地主机上运行 restify 服务器，我得到一个 access-control-allow-origin 和一个 access-control-expose-header。在 Node（在 Azure 中）上运行时，我只能获得 access-control-expose-header。

我已经尝试了什么（没有好的结果）：

为 restify 服务器实现 cors 中间件 使用 Express 代替 restify 在响应中手动添加标头：res.send(token, 'Access-Control-Allow-Origin': '*' ) 在 Cors middelware 的（受信任的）来源列表中指定域名

[解决方案]在运行restify服务的azure app服务中，将运行调用javascript的域名添加到已获批准的来源列表中。

我当前的代码（使用 Cors 中间件）

调整服务器

const fetch = require('node-fetch');
const restify = require('restify');
const path = require('path');
const corsMiddleware = require('restify-cors-middleware');

const cors = corsMiddleware(
    origins: ['*']
);

// Create HTTP server and Cors
let server = restify.createServer();
server.use(cors.actual);
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.`);
);

// Listen for bot requests.
server.post('/api/messages', (req, res) => 
    adapter.processActivity(req, res, async (context) => 
        await bot.run(context);
    );
);

// Listen for token requests.
server.get('/api/token',
    async function(req, res) 
        const result = await fetch('https://webchat.botframework.com/api/tokens', 
            method: 'GET',
            headers: 
                Authorization: `Bearer $ process.env.directLineSecret `
            
        );
        const token = await result.json();
        console.log(token);
        res.send(token);
    );

网络聊天客户端

在这段代码 sn-p 中，客户端正在与本地主机上运行的服务器通信。这行得通。一旦我们与托管在 Azure 上的服务器交谈，它就不再工作了（由于 cors 似乎）

(async function () 
  const res = await fetch('http://localhost:3978/api/token',  method: 'GET' );
  const webChatToken = await res.json();

  window.WebChat.renderWebChat(
    directLine: window.WebChat.createDirectLine( token: webChatToken )
  , document.getElementById('webchat'));

  document.querySelector('#webchat > *').focus();
)().catch(err => console.error(err));

有人对如何解决这个问题有任何想法吗？

【问题讨论】：

你能试试this帖子中给出的解决方案吗？ （接受的答案）

tnx 但我确实尝试过。无影响

【参考方案1】：

让我搜索了一天并尝试了很多选择。 解决方案在Azure App Service (Node) CORS origins won't work no matter where I add them

您必须在运行您的 restify 服务的 appservice 的 CORS 菜单中的已批准来源列表中添加调用域。 不确定这是否有意义，但它有所帮助。