title: Bottle.py - “No 'Access-Control-Allow-Origin' header is present on the requested resource”
body: <p>I have the following Bottle routing set up:</p>
  
  <pre><code>import tornado
  from bottle import route, run, hook, response
  import cudpred as cp
  
  _allow_origin = '*'
  _allow_methods = 'PUT, GET, POST, DELETE, OPTIONS'
  _allow_headers = 'Authorization, Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token'
  
  @hook('after_request') 
  def enable_cors():
      '''Add headers to enable CORS'''
  
      response.headers['Access-Control-Allow-Origin'] = _allow_origin
      response.headers['Access-Control-Allow-Methods'] = _allow_methods
      response.headers['Access-Control-Allow-Headers'] = _allow_headers
  
  @route('/', method = 'OPTIONS')
  @route('/&lt;path:path&gt;', method = 'OPTIONS')
  def options_handler(path = None):
      return
  
  @route('/mapjson/&lt;weekdaytopredict:int&gt;/&lt;hourtopredict:int&gt;')
  def mapjson(weekdaytopredict=0, hourtopredict=0):
      return cp.writeGeoJSON(weekdaytopredict, hourtopredict)
  
  
  @route('/preddt/&lt;weekdaytopredict:int&gt;/&lt;hourtopredict:int&gt;/&lt;predictionmethod:int&gt;/&lt;normalization:int&gt;')
  def preddt(weekdaytopredict=0, hourtopredict=0, predictionmethod =0, normalization=0):
      return cp.predicitonCalculator(weekdaytopredict, hourtopredict, predictionmethod, normalization)
  
  run(server='tornado', host='0.0.0.0', port=2526, debug=False, reloader=True)
  </code></pre>
  
  <p>I'm making an API call through an HTML <code>&lt;form&gt;</code> which is connected to a JavaScript function which then calls the API:</p>
  
  <pre><code>&lt;form onSubmit=" return updateMap(event, document.getElementById('weekday').value, document.getElementById('hour').value, document.getElementById('method').value, document.getElementById('normalization').value)"&gt;  
  ...&lt;/* Form /&gt;...
  &lt;/form&gt;
  </code></pre>
  
  <p>And the JavaScript function is:</p>
  
  <pre><code>function updateMap(e, weekday, hour, model, normalization){
      e.preventDefault();
      if (typeof(weekday) == 'undefined' || typeof(hour) == 'undefined' || weekday == '' || hour == '') {
          mapurl = 'mymap.url';
      } else if(model == 0) {
          mapurl = 'http://remote_machine:port/mapjson/' + weekday + '/' + hour
      } else {
          mapurl = 'http://remote_machine:port/preddt/' + weekday + '/' + hour + '/' + model + '/' + normalization
      }
      ...ETC...
  }
  </code></pre>
  
  <p>My issue is, that this works for the <code>mapjson</code> call, but doesn't work for the <code>preddt</code> call. Whenever I run any request for <code>mapjson</code>, it returns the requested output without a problem, however, if I try to access <code>http://remote_machine:port/preddt</code> with parameters, I get:</p>
  
  <pre><code>XMLHttpRequest cannot load http://remote_machine:port/preddt/4/21/1/0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my.hosted.website.com' is therefore not allowed access. The response had HTTP status code 500.
  </code></pre>
  
  <p>What am I missing, how to fix this?</p>