Search code examples
javascriptpythonfirefoxbottle

CORS request won't work in Firefox, works in Chrome and Safari


This fiddle works fine in Chrome but not in Firefox: http://jsfiddle.net/u5pugnbn/

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="button" value="Get Data" onclick="getData()"/>
    <h1 id="output"></h1>
  </body>

  <script src ="main.js"></script>
</html>

main.js

var API_URL = "http://andr3w321.pythonanywhere.com";

function getData() {
  var output = document.getElementById('output');
  var xhr = new XMLHttpRequest();
  var url = API_URL + "/hello";
  xhr.open("GET", url, true);
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        output.innerHTML = xhr.responseText;
      } else {
        output.innerHTML = "Error: " + xhr.statusText;
      }
    }
  };
  xhr.onerror = function (e) {
    output.innerHTML = "Error: " + xhr.statusText;
  };
  xhr.send();
}

Python bottle server file

from bottle import default_app, route, run, template, static_file, url, get, redirect, response, request

# allow requests from other domains
def enable_cors(fn):
    def _enable_cors(*args, **kwargs):
        # set CORS headers
        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


@route('/hello', method=['OPTIONS', 'GET'])
@enable_cors
def hello():
    return "hello"

application = default_app()

Uploading the static index.html to a domain and changing the Allow-Origin from * to the specific domain did not seem to help.


Solution

  • Turns out Privacy badger was blocking the request. After I disabled it after visiting index.html it works fine.