烧瓶缺少XMLHttpRequest GET的输出

Question

I am getting started with chabots UI and REST APIs.

I started by making a simple api with flask:

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

When I access http://EC2_HOSTNAME:5000 I can see Hello World!

Then, I adapted the example from https://github.com/botui/botui-examples/tree/master/git-stars-bot to simply return Hello World! whatever the user input is.

Here is my adapted stars-bot.js script:

var loadingMsgIndex,
    botui = new BotUI('stars-bot'),
    API = 'http://EC2_HOSTNAME:5000';

function sendXHR(repo, cb) {
  var xhr = new XMLHttpRequest();
  var self = this;
  xhr.open('GET', API);
  xhr.onload = function () {
    var res = xhr.responseText
    cb(res);
  }
  xhr.send();
}

function init() {
  botui.message
  .bot({
    delay: 1000,
    content: 'Enter the repo name to see how many stars it have:'
  })
  .then(function () {
    return botui.action.text({
      delay: 1000,
      action: {
        value: 'dummy user input',
        placeholder: 'user input'
      }
    })
  }).then(function (res) {
    loadingMsgIndex = botui.message.bot({
      delay: 200,
      loading: true
    }).then(function (index) {
      loadingMsgIndex = index;
      sendXHR(res.value, showStars)
    });
  });
}

function showStars(stars) {
  botui.message
  .update(loadingMsgIndex, {
    content: stars
  })
  .then(init); // ask again for repo. Keep in loop.
}

init();

However, when I access the index.html file and enter an input, the answer seems to be blank. I was expecting to get the Hello World! value. By checking the flask logs, I also see that the status of the GET request is 200.

Update: I use brave/safari browser.

I can't figure out where I'm wrong yet. Any help appreciated! Thanks

Answer 1

The CORS issue can be solved with Flask-CORS extension.
Install it with pip:

$ pip install flask-cors

Then in your API:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)