azurecorsazure-bot-servicedirect-line-botframework

No response from Directline for Azure Bot Services and blocked by CORS policy


I had use the Bot Services sample from Microsoft Sample for Bot Services.

After I debug, the web page does not shown any thing. Here with my source code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Chat: Minimal bundle with Markdown</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.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>
      (async function() {
         const res = await fetch('https://csharpbotdw.azurewebsites.net/directline/token', { method: 'POST' });
        const { token } = await res.json();
        const markdownIt = window.markdownit();
        window.WebChat.renderWebChat(
          {
                directLine: window.WebChat.createDirectLine({ token })

          },
          document.getElementById('webchat')
        );
        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
</body>
</html>

I only saw the error mention

Access to fetch at 'https://csharpbotdw.azurewebsites.net/directline/token' from origin 'http://localhost:63191' 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. [http://localhost:63191/Test13122019]

Solution

  • Obviously , your Azure app service has not configured CORS correctly in the CORS setting of your Azure app service which hosts your codes. I solved a similar issue with detailed steps here, pls have a try to see if it is helpful for you.

    Seems there is something wrong with the URL : https://csharpbotdw.azurewebsites.net/directline/token that you get your directLine token. Each time I call this URL I got an 404 error, seems there is no such API there.

    If you haven't implemented such API in your code, try the code below in your .net framework project :

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net.Http;
    using System.Net.Http.Headers;
    using System.Text;
    using System.Threading.Tasks;
    using System.Web;
    using System.Web.Http;
    using Newtonsoft.Json;
    
    namespace CoreBot.Controllers
    {
        [Route("api/token")]
        public class TokenController : ApiController
        {
            public async Task<IHttpActionResult> token()
            {
                var secret = "<your bot channel directline secret>";
    
                HttpClient client = new HttpClient();
    
                HttpRequestMessage request = new HttpRequestMessage(
                    HttpMethod.Post,
                    $"https://directline.botframework.com/v3/directline/tokens/generate");
    
                request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", secret);
    
                var userId = $"dl_{Guid.NewGuid()}";
    
                request.Content = new StringContent(
                    Newtonsoft.Json.JsonConvert.SerializeObject(
                        new { User = new { Id = userId } }),
                        Encoding.UTF8,
                        "application/json");
    
                var response = await client.SendAsync(request);
                string token = String.Empty;
    
                if (response.IsSuccessStatusCode)
                {
                    var body = await response.Content.ReadAsStringAsync();
                    token = JsonConvert.DeserializeObject<DirectLineToken>(body).token;
                }
    
                var config = new ChatConfig()
                {
                    token = token,
                    userId = userId
                };
    
                return Ok(config);
            }
    
        }
    
    
        public class DirectLineToken
        {
            public string conversationId { get; set; }
            public string token { get; set; }
            public int expires_in { get; set; }
        }
        public class ChatConfig
        {
            public string token { get; set; }
            public string userId { get; set; }
        }
    }
    

    You can get bot channel directline secret here : enter image description here enter image description here

    To integrate this into your project, pls create a TokenController.cs file under your controller folder in your project and paste the code above into it: enter image description here

    And you will be able to get token via URL :https://csharpbotdw.azurewebsites.net/api/token by post method after you publish your project to Azure.

    Test result on my local : enter image description here

    You can use the HTML code to connect to your bot after you enabled CORS and publish your code to Azure :

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
        <title>Web Chat: Minimal bundle with Markdown</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
            <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.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>
              (async function() {
                 const res = await fetch('https://csharpbotdw.azurewebsites.net/api/token', { method: 'POST' });
                const { token } = await res.json();
                
                window.WebChat.renderWebChat(
                  {
                        directLine: window.WebChat.createDirectLine({ token })
        
                  },
                  document.getElementById('webchat')
                );
                document.querySelector('#webchat > *').focus();
              })().catch(err => console.error(err));
            </script>
        </body>
        </html>