0

I have a flask API to control an immersion heater device.

https://github.com/timcknowles/anovapi_backend/blob/master/anova.py

This is on my localhost server and it responds correctly to JQuery POST requests on the same domain e.g. 

$(document).ready(function() {
            $("#start").click(function() {

                    $.ajax({
                      type: 'post',
                      url: 'http://192.168.0.13:5000/start',
                      dataType: 'jsonp',
                      success: function(data) {
                         $("#message").html(data);
                      }


$("#settemp").click(function() {

                    $.ajax({
                      type: 'post',
                      contentType: 'application/json',
                      url: ' http://192.168.0.13:5000/temp',
                      data: JSON. stringify ({"temp":"50"}),
                      dataType: 'json',
                      success: function(data) {
                         $("#message").html(data);
                      }
            });

However I wanted to build a sinatra client app on a different server

https://github.com/timcknowles/anovapi_frontend/blob/master/main.rb

to interact with the same api. The jquery is identical and works fine for the START call however for the TEMP call it doesn't work

In the developer console of firefox I can see it has OPTIONS instead of a POST request (response 200).

Initially I had cross domain problems with all my api jQuery requests and I thought I had resolved these by adding the flask cors extension to my api.

https://pypi.python.org/pypi/Flask-Cors

I don't understand why the temp call isn't working but the others are. I suspect it is because I am sending data in the form of temperature values.

Any advice hugely appreciated.

TimK
  • 109
  • 1
  • 9
  • What's the error in the second call? – Robert Moskal Apr 23 '16 at 13:51
  • It doesn't seen to give an error it just doesn't work – TimK Apr 23 '16 at 14:25
  • Trap the error function in your js or see what the result of the call is in your browser developer tools. – Robert Moskal Apr 23 '16 at 14:27
  • In fact using the chrome console this is the error: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4567' is therefore not allowed access. Interestingly I can now see on chrome that the other requests e.g. start also generate an error XMLHttpRequest cannot load http://192.168.0.13:5000/start. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4567' is therefore not allowed access they still work and switch the device on/off – TimK Apr 23 '16 at 14:29
  • You do have an extra space here: JSON. stringify – Robert Moskal Apr 23 '16 at 14:31
  • @RobertMoskal I have removed the space JSON.stringify but I still get the same error – TimK Apr 23 '16 at 14:37

1 Answers1

1

I think you need to initialize CORS() for Flask to work.

Try putting this on line 12 of your python server:

cors = CORS(app, resources={r"/*": {"origins": "*"}})

You might also get away with just CORS(app) (I've never used Flask so I'm unsure).

See the Flask docs under Simple Usage for more information.

iHiD
  • 2,450
  • 20
  • 32