Why aren't my AJAX requests going through? - node.js

Question

This is my github repository for this live demo I have going on at the moment.
//index.js is where the POST request is being sent from
class Index extends React.Component {
state = {
loading: false,
};
handleClickLoading = () => {
this.setState(state => ({
loading: true,
}));
var jqXHR = $.ajax({
type: "POST",
url: "http://localhost:5000/login",
async: true,
data: { mydata: [Cookies.get('links'), Cookies.get('numSentences')] },
success: function(){
const data = JSON.parse(jqXHR.responseText);
console.log(data);
}
});
Cookies.set('final', jqXHR.responseText);
console.log(jqXHR.responseText)
};
render() {
const {loading} = this.state;
return (
<div>
<AppBar/>
<Block/>
<Card>
<CardActions>
<Button size="large"
fullWidth={true}
onClick={this.handleClickLoading}>Submit</Button>
</CardActions>
</Card>
<Fade
in={loading}
unmountOnExit
>
<BottomBar/>
</Fade>
</div>
)
}
}
export default Index;
and its trying to get data ran through python scripts through a Flask server:
...
def crossdomain(origin=None, methods=None, headers=None,
max_age=21600, attach_to_all=True,
automatic_options=True):
if methods is not None:
methods = ', '.join(sorted(x.upper() for x in methods))
if headers is not None and not isinstance(headers, list):
headers = ', '.join(x.upper() for x in headers)
if not isinstance(origin, list):
origin = ', '.join(origin)
if isinstance(max_age, timedelta):
max_age = max_age.total_seconds()
def get_methods():
if methods is not None:
return methods
options_resp = current_app.make_default_options_response()
return options_resp.headers['allow']
def decorator(f):
def wrapped_function(*args, **kwargs):
if automatic_options and request.method == 'OPTIONS':
resp = current_app.make_default_options_response()
else:
resp = make_response(f(*args, **kwargs))
if not attach_to_all and request.method != 'OPTIONS':
return resp
h = resp.headers
h['Access-Control-Allow-Origin'] = origin
h['Access-Control-Allow-Methods'] = get_methods()
h['Access-Control-Max-Age'] = str(max_age)
if headers is not None:
h['Access-Control-Allow-Headers'] = headers
return resp
f.provide_automatic_options = False
return update_wrapper(wrapped_function, f)
return decorator
#app.route("/")
def home():
return "hi"
#app.route("/index")
#app.route('/login', methods=['GET', 'POST', 'OPTIONS'])
#crossdomain(origin='*')
def login():
message = None
if request.method == 'POST':
datafromjs = request.form['mydata']
result = "test"
resp = make_response('{"response": '+result+'}')
resp.headers['Content-Type'] = "application/json"
resp.headers.add('Access-Control-Allow-Origin', '*')
resp.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
resp.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return resp
return render_template('login.html', message='')
if __name__ == "__main__":
app.run(debug = True)
And this is the console output onClick from the browser:
and Flask:
The javascript is trying to fetch the output of a few python functions given a few parameters.
I'm just at an impasse here and it's the last cog in my project. I have no prior experience with this kind of stuff but any help is appreciated!

Answer 1

I believe this is a CORS issue, like JJ Hakala points out. Even if you are going to the same domain (localhost) but on a different port (8080 -> 5000) then you need an authorisation header to be present (server side).
If you can ensure that the header access-control-allow-origin:* is present (a wildcard domain approach) in server responses, then you should have no more ajax issues.
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing