Skip to content

HTTP 400 on webchat connection to offline-directline #22

@kriewall

Description

@kriewall

I'm getting an HTTP 400 Bad Request when I attempt to connect web chat to your offline-directline service, despite your clear usage documentation. I'm pretty certain that I'm missing something obvious; thought I'd inquire here in the hopes you can see what it is.

I've got a bot written in .NET fired up and listening on http://localhost:3979/api/Messages. I've got the following content in an app.js file and have it running via node app.js:

const directline = require("offline-directline");
const express = require("express");

const app = express();
directline.initializeRoutes(app, "http://127.0.0.1:3000", "http://127.0.0.1:3979/api/messages");

I've modified the FullWindow index.html as follows ... Chrome and Firefox were erroring out for favicon.ico retrieval, so I added the favicon.ico content to resolve that issue:

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" 
      type="image/ico"
      href="http://localhost:8000/favicon.ico">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Bot Chat</title>

    <link href="../../botchat.css" rel="stylesheet" />
    <link href="../../botchat-fullwindow.css" rel="stylesheet" />

    <style>
      html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="BotChatGoesHere"></div>
    <script src="../../botchat.js"></script>
    <script>
      const params = BotChat.queryParams(location.search);

      const user = {
        id: params['userid'] || 'userid',
        name: params['username'] || 'username'
      };

      const bot = {
        id: params['botid'] || 'botid',
        name: params['botname'] || 'botname'
      };

      window['botchatDebug'] = params['debug'] && params['debug'] === 'true';

      BotChat.App({
        bot: bot,
        locale: params['locale'],
        resize: 'window',
        // sendTyping: true,    // defaults to false. set to true to send 'typing' activities to bot (and other users) when user is typing
        user: user,
        // locale: 'es-es', // override locale to Spanish

        directLine: {
          secret: params['s'],
          token: params['t'],
          domain: params['domain'],
          webSocket: false // defaults to true
        }
      }, document.getElementById('BotChatGoesHere'));
    </script>
  </body>
</html>

I'm opening web chat using Chrome at this URL: http://localhost:8000/samples/fullwindow/?domain=http://localhost:3000/directline&BotId=Test. I've tried it both with and without the BotId modifier. Either way, web chat starts up with no errors in npm, and the app.js service responds with `Created conversation with conversationId: {unique Guid}``. However, when I try to enter a message, it shows up in web chat with a little note "couldn't send".

Inspecting in Fiddler, there are two request-response pairs when the connection between web chat and offline-directline is made, the first of which succeeds with HTTP 200, the second fails with HTTP 400:

Pass (HTTP 200):
OPTIONS http://localhost:3000/directline/conversations HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:8000
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Access-Control-Request-Headers: authorization,x-requested-with
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
Allow: POST
Content-Type: text/html; charset=utf-8
Content-Length: 4
ETag: W/"4-Yf+Bwwqjx254r+pisuO9HfpJ6FQ"
Date: Wed, 16 May 2018 18:53:45 GMT
Connection: keep-aliveq

POST
Fail (HTTP 400):
POST http://localhost:3000/directline/conversations HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 0
Accept: application/json
Origin: http://localhost:8000
X-Requested-With: XMLHttpRequest
Authorization: Bearer undefined
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Referer: http://localhost:8000/samples/fullwindow/?domain=http://localhost:3000/directline&BotId=Test
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
HTTP/1.1 400 Bad Request
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
Content-Type: application/json; charset=utf-8
Content-Length: 75
ETag: W/"4b-viC/2aaVSbzlx2kpl0w9rOF69h4"
Date: Wed, 16 May 2018 18:53:45 GMT
Connection: keep-alive

{"conversationId":"51938246-91a5-4d19-9a8c-f600ed06a70a","expires_in":1800}

I get the same HTTP 400 error using FireFox; IE11 is a non-starter since it returns an error `Object doesn't support property or method 'find'`` when I attempt to send a message. A breakpoint on the MessageController in my bot never gets hit, so there doesn't appear to be any dependence on the bot at this point. What am I doing wrong?

(P.S. Apologies if anything here is unclear. My background is in .NET desktop app development, so I'm trying to wrap my head around new technology content here.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions