POST json 数据到 Bottle

Question

I am a newbie to Bottle and sort of to Python as well and I am trying create an app whenever I click a button, an AJAX is fired and POST a json to server and store it using SQLite.

However, at current stage, I am trying to figure out how do I successfully received the data in the server.

On the client side, I have the following send_data function written in JavaScript.

function send_data(feedback) {
    $.ajax({
        url: "/feedback",
        type: "POST",
        data: JSON.stringify(feedback),
        contentType: "application/json",
        success: function() {
            alert("Feedback successfully stored in the server!");
        },
        error: function() {
            alert("Feedback failed to store back in the server!");
        },          

}

The passed in parameter feedback looks something like {"id1": 1, "id2": 2} .

On the server side, I have a feedback.py file and the code is

from bottle import request, route, run
@route('/feedback', method='POST')

def feedback():
    comments = request.json
    print comments

run(host='localhost', port=8080)

Right now, I just want to check if I have received the data successful. But everytime, when I click that botton, I receive the following error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/feedback. This can be fixed by moving the resource to the same domain or enabling CORS.

OPTIONS http://localhost:8080/feedback [HTTP/1.0 405 Method Not Allowed 2ms]

I am not sure if it's because I am not using the element <form> . That botton is technically just an image. Every time I click that image, send_data() function is fired.

Anyone can help? I really appreciate it. Thank you!

Answer 1

Cross Origins Requests are restricted as a security measure by the browser. It is possible to overcome that by setting an Access-Control-Allow-Origin header. You can can use bottle-cors or create a decorator like the following on your server code (Python/bottle):

def enable_cors(fn):
  def _enable_cors(*args, **kwargs):
      response.headers['Access-Control-Allow-Origin'] = '*'
      response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, OPTIONS'
      response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token'

      if request.method != 'OPTIONS':
          # actual request; reply with the actual response
          return fn(*args, **kwargs)

  return _enable_cors

and then with your example:

from bottle import request, route, run
@enable_cors
@route('/feedback', method='POST')

def feedback():
    comments = request.json
    print comments

run(host='localhost', port=8080)

Note that it's best to allow specific origins instead of using * .

You can read more about Cross-Origin Resource Sharing (CORS) here

Answer 2

You can make this work by disabling the Cross-origin restrictions.

On safari, open the Develop panel, and check disable cross-origin restrictions, or use a browser like Firefox.