What exactly does flask.abort() do? - javascript

I'm actually working with flask.
I use flask in order to run a server, which will be requested by a chrome extension (js).
Requesting the server from the extension is quite simple : I use the chrome.runtime.sendMessage() method. This method provides also a callback function, taking as parameters a JSON object (the response from the server).
E.g, suppose that I have this route on my server :
#app.route('/users', methods=['POST'])
def api_login():
if 'username' not in request.json :
return jsonify(success=false)
else :
return jsonify(success=true)
Then, I can in my extenstion, and more precisely in the callback function, check the success value :
function(response) {
if(response.success){
console.log("Login ok !")
}
}
But now, my team doesn't want rely on this anymore, and wants to use http error code instead. I know that flask has an abort function, but while reading the documentation, I have had a lot of trouble to understand what it really does. When I call in my route :
else:
abort(422, {"error":"Missing parameters"})
how can I use these information on the extension (js) ? Does flask automatically returns a specific JSON object when abort is called ? How can I check the error code ? I would like to do something like that in the client code :
if(response.status == 422) {
console.log("Error")
}
One of the clues I have, reading all the StackOverflow threads about abort() is to define a specific error function using the decorator #app.errorhandler(code) :
#app.errorhandler(422)
def myErrorCase(error):
return jsonify(status=422, error="missing parameters")
But I assume that there are more straightforward ways.
Thanks for your help.


Note that i'm using JQuery for this example because it's easier and saves you from a lot of stress and cross-browser issues.
If you just pass in the error code like you're already doing, Werkzeug wraps the error message in html (Though you can still use regex to extract the error message on the client side, but that isn't really flexible). So No Flask doesn't automatically return a JSON string back to the client
The flask abort method either accepts an error code or it can accept a Response object. To achieve what you want to do, you have to pass a Response object to the abort method.
The Response Object is a wrapper around the werkzeug.wrappers.Response object
There also a helper method to create a response object called make_response so you don't have to fiddle with the Response class if you just want to create a simple Response object
One of the reasons you'll create a Response object instead of allowing render_template or abort do it for you is when you need to add a custom header to a response or change the default headers that abort adds to the response.
app.py
from flask import Flask, abort, render_template, Response
from json import dumps
app = Flask(__name__)
#app.route('/')
def home():
return render_template('client.html')
#app.route('/resource')
def resource():
error_message = dumps({'Message': 'You cannot see this!!!'})
abort(Response(error_message, 401))
if __name__ == '__main__':
app.run()
client.html
<html>
<head>
<title></title>
<meta content="">
<style></style>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
</head>
<body>
<script>
$.ajax({
url: 'http://localhost:5000/resource',
dataType: 'json',
success: function(data){
alert('Your request was successful');
},
statusCode: {
401: function (response) {
error = JSON.parse(response.responseText)
alert(error.Message)
}
}
});
</script>
</body>
</html>
You can handle different error codes by defining a corresponding function for them under statusCode
You can still do this from pure Javascript, It just involves more keystrokes.
You should really read through werkzeug's source code to get a better understanding on how abort and exceptions are generally handled. This would be a good starting point

Related

How to send a single string to python function from ajax query

Context: I am using JavaScript to send a string as a parameter to a python function over the flask.
But I always get "the missing 1 parameter error" on the python side.
This is what my Ajax query looks like:
$.ajax({
url : 'ListMaker',
data: 'Q1',
success: function(data) {
//does something
}
});
This is what my python function looks like:
#app.route("/ListMaker",methods=["POST","GET"])
def ListMaker(text):
#make it a string just incase
quarter=str(text)
//do things with string
Any other similar questions I can find online, only talk about issues with Ajax and don't really cover the python side. In my case, the function is clearly being called, but it claims to receive no data to work with.
Am I sending the data wrongly from the Ajax side? Or am I parsing it wrongly on the python side?
Clarification for NoneType error from the comments below:
I am sending over:
data: JSON.stringify({"letter": "Q", "value": "25%"})
I am receiving it on the python side like so:
data=request.get_json()
letter=data["letter"]
value=data["value"]

The parameters in a Flask route are for variables in the path, called "variable rules" in Flask:
#app.route("/ListMaker/<text>", methods=["POST", "GET"])
def ListMaker(text):
...
As jQuery Ajax requests are GET by default, your data will be converted to a query string, in this case /ListMaker?Q1. You can access the query string in Flask with flask.request.args.
However, query strings are key-value, and you are only supplying a key, which will correspond to the Python dict {'Q1': ''}. You should either set the Ajax data to a string like quarter=Q1, or use an object:
$.ajax({
url : 'ListMaker',
data: {'quarter': 'Q1'}, // or 'quarter=Q1'
success: function(data) {
//does something
}
});
Then you will be able to access it in Flask:
#app.route("/ListMaker", methods=["POST", "GET"])
def ListMaker(): # no parameters needed
quarter = flask.request.args["quarter"]
# quarter == "Q1"
If you want to use a POST request, set method: 'POST' in the Ajax-call, and use flask.request.get_data() or flask.request.get_json() on the Flask side.

Return an error message from Flask and handle it on JavaScript after an AJAX request?

So I have a Python backend done with Flask:
#app.route('/test/')
def test():
data = get_database_data(request.args.id) # Returns dict of data, or None
if data is None:
# What do I do here?
return jsonify(data)
And I now make an AJAX request with JS:
$(document).ready(function() {
$.get("/test/", {id: 5}, function(data) {
// What do I do here?
});
});
I want to call handleData(data) on JS side if it returns proper data, but how do I return an error and handle it on JS side to avoid trying to handle the error with handleData()?

You can use flask.abort to exit the controller with an error code (a message). See: http://flask.pocoo.org/docs/1.0/quickstart/#redirects-and-errors
The classic error code can be 400 Bad Request. If you have a REST API, you can choose an error code here HTTP Status Codes. see codes with asterisk.
From the client side, you handle this error with the jQuery.ajax() function. There is an "error" callback. See: https://api.jquery.com/jQuery.ajax/

How to send data in request body with a GET when using jQuery $.ajax()

The service API I am consuming has a given GET method that requires the data be sent in the body of the request.
The data required in the body is a list of id's separated by hypen and could potentially be very large and thus it must be sent in the body otherwise it will likely foobar somewhere in the browsers/proxies/webservers etc chain. Note I don't have control over the service or API so please don't make suggestions to change it.
I am using the following jQuery code however observing the request/response in fiddler I can see that the "data" I am sending is ALWAYS converted and appended to the query string despite me setting the "processData" option to false...
$.ajax({
url: "htttp://api.com/entity/list($body)",
type: "GET",
data: "id1-id2-id3",
contentType: "text/plain",
dataType: "json",
processData: false, // avoid the data being parsed to query string params
success: onSuccess,
error: onError
});
Anyone know how I can force the "data" value to be sent in the body of the request?

In general, that's not how systems use GET requests. So, it will be hard to get your libraries to play along. In fact, the spec says that "If the request method is a case-sensitive match for GET or HEAD act as if data is null." So, I think you are out of luck unless the browser you are using doesn't respect that part of the spec.
You can probably setup an endpoint on your own server for a POST ajax request, then redirect that in your server code to a GET request with a body.
If you aren't absolutely tied to GET requests with the body being the data, you have two options.
POST with data: This is probably what you want. If you are passing data along, that probably means you are modifying some model or performing some action on the server. These types of actions are typically done with POST requests.
GET with query string data: You can convert your data to query string parameters and pass them along to the server that way.
url: 'somesite.com/models/thing?ids=1,2,3'

we all know generally that for sending the data according to the http standards we generally use POST request.
But if you really want to use Get for sending the data in your scenario
I would suggest you to use the query-string or query-parameters.
1.GET use of Query string as.
{{url}}admin/recordings/some_id
here the some_id is mendatory parameter to send and can be used and req.params.some_id at server side.
2.GET use of query string as{{url}}admin/recordings?durationExact=34&isFavourite=true
here the durationExact ,isFavourite is optional strings to send and can be used and req.query.durationExact and req.query.isFavourite at server side.
3.GET Sending arrays
{{url}}admin/recordings/sessions/?os["Windows","Linux","Macintosh"]
and you can access those array values at server side like this
let osValues = JSON.parse(req.query.os);
if(osValues.length > 0)
{
for (let i=0; i<osValues.length; i++)
{
console.log(osValues[i])
//do whatever you want to do here
}
}

Just in case somebody ist still coming along this question:
There is a body query object in any request. You do not need to parse it yourself.
E.g. if you want to send an accessToken from a client with GET, you could do it like this:
const request = require('superagent');
request.get(`http://localhost:3000/download?accessToken=${accessToken}`).end((err, res) => {
if (err) throw new Error(err);
console.log(res);
});
The server request object then looks like {request: { ... query: { accessToken: abcfed } ... } }

You know, I have a not so standard way around this. I typically use nextjs. I like to make things restful if at all possible. If I need to make a get request I instead use post and in the body I add a submethod parameter which is GET. At which point my server side handles it. I know it's still a post method technically but this makes the intention clear and I don't need to add any query parameters. Then the get method handles a get request using the data provided in the post method. Hopefully this helps. It's a bit of a side step around proper protocol but it does mean there's no crazy work around and the code on the server side can handle it without any problems. The first thing present in the server side is if(subMethod === "GET"){|DO WHATEVER YOU NEED|}

jQuery Get Request on HTTP URL

i've recently tried to get some Response from an URL using jQuery. Therefore I copied a get request sample of jQuery API Get Request Tutorial into my project and tried to run it, but my debugging messages showed me, that it can't go further. I tried the javascript Ajax Library using a simple request, but it didn't work.
So i'm asking you, if you could help me somehow.
And this is all what i do, but there is no response.
var url = "http://www.google.com";
$.get(url, function(data){
alert("Data Loaded: " + data);
});
Did i probably forgot to include a ajax or jQuery library. For a better understanding, i have c and obj-c experince, this is why i think, that a library is missing.
In each sample there is just a short url like "test.php". Is my complete HTTP url wrong?
Thanks for your answers in advanced.
Br
Nic

I have provided an example scenario to help get you started:
<!-- Include this jQuery library in your HTML somewhere: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script
This is probably best to include inside of an external JS file:
//Listen when a button, with a class of "myButton", is clicked
//You can use any jQuery/JavaScript event that you'd like to trigger the call
$('.myButton').click(function() {
//Send the AJAX call to the server
$.ajax({
//The URL to process the request
'url' : 'page.php',
//The type of request, also known as the "method" in HTML forms
//Can be 'GET' or 'POST'
'type' : 'GET',
//Any post-data/get-data parameters
//This is optional
'data' : {
'paramater1' : 'value',
'parameter2' : 'another value'
},
//The response from the server
'success' : function(data) {
//You can use any jQuery/JavaScript here!!!
if (data == "success") {
alert('request sent!');
}
}
});
});

You're hitting the Same Origin Policy with regard to ajax requests.
In a nutshell, JS/Ajax is by default only allowed to fire requests on the same domain as where the HTML page is been served from. If you intend to fire requests on other domains, it has to support JSONP and/or to set the Access-Control headers in order to get it to work. If that is not an option, then you have to create some proxy on the server side and use it instead (be careful since you can be banned for leeching too much from other sites using a robot).

As others have said you can't access files on another server. There is a hack tho. If you are using a server side language (as i assume you are) you can simply do something like:
http://myserver.com/google.php:
<?php
echo get_file_contents('http://www.google.com');
?>
http://myserver.com/myscript.js
$.get('google.php',function(data){ console.log(data) });
That should work!

you just can access pages from your domain/server

JQuery Ajax Post results in 500 Internal Server Error

I am trying to perform this AJAX post but for some reason I am getting a server 500 error. I can see it hit break points in the controller. So the problem seems to be on the callback. Anyone?
$.ajax({
type: "POST",
url: "InlineNotes/Note.ashx?id=" + noteid,
data: "{}",
dataType: "json",
success: function(data) {
alert(data[1]);
},
error: function(data){
alert("fail");
}
});
This is the string that should be returned:
{status:'200', text: 'Something'}

I suspect that the server method is throwing an exception after it passes your breakpoint. Use Firefox/Firebug or the IE8 developer tools to look at the actual response you are getting from the server. If there has been an exception you'll get the YSOD html, which should help you figure out where to look.
One more thing -- your data property should be {} not "{}", the former is an empty object while the latter is a string that is invalid as a query parameter. Better yet, just leave it out if you aren't passing any data.

in case if someone using the codeigniter framework, the problem may be caused by the csrf protection config enabled.

This is Ajax Request Simple Code To Fetch Data Through Ajax Request
$.ajax({
type: "POST",
url: "InlineNotes/Note.ashx",
data: '{"id":"' + noteid+'"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data.d);
},
error: function(data){
alert("fail");
}
});

I just had this problem myself, even though i couldn't find the reason for it in my case, when changing from POST to GET, the problem 500 error disappeared!
type:'POST'

I experienced a similar compound error, which required two solutions. In my case the technology stack was MVC/ ASP.NET / IIS/ JQuery. The server side was failing with a 500 error, and this was occurring before the request was handled by the controller making the debug on the server side difficult.
The following client side debug enabled me to determine the server error
In the $.ajax error call back, display the error detail to the console
error: (error) => {
console.log(JSON.stringify(error));
}
This at least, enabled me to view the initial server error
“The JSON request was too large to be serialized”
This was resolved in the client web.config
<appSettings>
<add key="aspnet:MaxJsonDeserializerMembers" value="150000" />
However, the request still failed. But this time with a different error that I was now able to debug on the server side
“Request Entity too large”
This was resolved by adding the following to the service web.config
<configuration>
…
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding maxBufferSize="2147483647" maxReceivedMessageSize="2147483647" maxBufferPoolSize="524288">
<readerQuotas maxDepth="32" maxStringContentLength="2147483647"
maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
</binding>
</basicHttpBinding>
</bindings>
The configuration values may require further tuning, but at least it resolved the server errors caused by the ajax post.

You can look up HTTP status codes here (or here), this error is telling you:
"The server encountered an unexpected condition which prevented it from fulfilling the request."
You need to debug your server.

I run into the same thing today. As suggested before get Firebug for Firefox, Enable Console and preview POST response. That helped me to find out how stupid the problem was. My action was expecting value of a type int and I was posting string. (ASP.NET MVC2)

There should be an event logged in the EventVwr (Warning from asp.net), which could provide you more details on where the error could be.

A 500 from ASP.NET probably means an unhandled exception was thrown at some point when serving the request.
I suggest you attach a debugger to the web server process (assuming you have access).
One strange thing: You make a POST request to the server, but you do not pass any data (everything is in the query string). Perhaps it should be a GET request instead?
You should also double check that the URL is correct.

I just face this problem today. with this kind of error, you won't get any responses from server, therefore, it's very hard to locate the problem.
But I can tell you "500 internal server error" is error with server not client, you got an error in server side script. Comment out the code closure by closure and try to run it again, you'll soon find out you miss a character somewhere.

You can also get that error in VB if the function you're calling starts with Public Shared Function rather than Public Function in the webservice. (As might happen if you move or copy the function out of a class). Just another thing to watch for.

Can you post the signature of your method that is supposed to accept this post?
Additionally I get the same error message, possibly for a different reason. My YSOD talked about the dictionary not containing a value for the non-nullable value.
The way I got the YSOD information was to put a breakpoint in the $.ajax function that handled an error return as follows:
<script type="text/javascript" language="javascript">
function SubmitAjax(url, message, successFunc, errorFunc) {
$.ajax({
type:'POST',
url:url,
data:message,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success:successFunc,
error:errorFunc
});
};
Then my errorFunc javascript is like this:
function(request, textStatus, errorThrown) {
$("#install").text("Error doing auto-installer search, proceed with ticket submission\n"
+request.statusText); }
Using IE I went to view menu -> script debugger -> break at next statement.
Then went to trigger the code that would launch my post. This usually took me somewhere deep inside jQuery's library instead of where I wanted, because the select drop down opening triggered jQuery. So I hit StepOver, then the actual next line also would break, which was where I wanted to be. Then VS goes into client side(dynamic) mode for that page, and I put in a break on the $("#install") line so I could see (using mouse over debugging) what was in request, textStatus, errorThrown. request. In request.ResponseText there was an html message where I saw:
<title>The parameters dictionary contains a null entry for parameter 'appId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ContentResult CheckForInstaller(Int32)' in 'HLIT_TicketingMVC.Controllers.TicketController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.<br>Parameter name: parameters</title>
so check all that, and post your controller method signature in case that's part of the issue

I found myself having this error to. I had .htaccess redirect configured in a directory. Well it reroutes ajax calls to ofcourse ($.post(../ajax.php)), so it couldn't find the actual file (resulting in 500 error).
I 'fixed' it by placing the ajax.php in a directory (So .htaccess didn't affect).

I was able to find the solution using the Chrome debugger (I don't have Firebug or other third-party tools installed)
Go to developer tab (CTRL+MAJ+I)
Network > click on the request which failed, in red > Preview
It showed me that I had a problem on the server, when I was returning a value which was self-referencing.

In my case it was simple issue, but hard to find. Page directive had wrong Inherits attributes. It just need to include the top level and it worked.
Wrong code
<%# Page Language="C#" CodeBehind="BusLogic.aspx.cs" Inherits="BusLogic"%>
Correct code
<%# Page Language="C#" CodeBehind="BusLogic.aspx.cs" Inherits="Web.BusLogic" %>

When using the CodeIgniter framework with CSRF protection enabled, load the following script in every page where an ajax POST may happen:
$(function(){
$.ajaxSetup({
data: {
<?php echo $this->config->item('csrf_token_name'); ?>: $.cookie('<?php echo $this->config->item('csrf_cookie_name'); ?>')
}
});
});
Requires: jQuery and jQuery.cookie plugin
Sources: https://stackoverflow.com/a/7154317/2539869 and http://jerel.co/blog/2012/03/a-simple-solution-to-codeigniter-csrf-protection-and-ajax

The JSON data you are passing to the server should have same name as you forming in client side.
Ex:
var obj = { Id: $('#CompanyId').val(),
Name: $("#CompanyName").val()
};
$.Ajax(data: obj,
url: "home/InsertCompany".....
If the name is different, ex:
[HttpPost]
public ActionResult InsertCompany(Int32 Id, string WrongName)
{
}
You will get this error.
If you are not passing the data, remove the data attribute from AJAX request.

I had this issue, and found out that the server side C# method should be static.
Client Side:
$.ajax({
type: "POST",
url: "Default.aspx/ListItem_Selected",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: ListItemElectionSuccess,
error: ListItemElectionError
});
function ListItemElectionSuccess(data) {
alert([data.d]);
}
function ListItemElectionError(data) {
}
Server Side:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static String ListItem_Selected()
{
return "server responce";
}
}

As mentioned I think your return string data is very long. so the JSON format has been corrupted.
There's other way for this problem. You should change the max size for JSON data in this way :
Open the Web.Config file and paste these lines into the configuration section
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>

Use a Try Catch block on your server side and in the catch block pass back the exception error to the client. This should give you a helpful error message.

I also faced the same problem. Here are two ways by which I have solved it-
1. If you're using some framework, make sure you are sending a CSRF token with the ajax call as well
Here is how the syntax will look like for laravel -
<meta name="_token" content="{{ csrf_token() }}">
In your js file make sure to call this before sending the ajax call
$.ajaxSetup({
headers: {
'X_CSRF-TOKEN' : $('meta[name="_token"]').attr('content')
}
});
Another way to solve it would be to change method from post to get

For me, the error was in php file to which i was sending request.
Error was in database connectivity. After fixing the php code, error resolved.

Your code contains dataType: json.
In this case jQuery evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner. Any malformed JSON is rejected and a parse error is thrown. An empty response is also rejected.
The server should return a response of null or {} instead.

I found this occurred in chrome when I did two ajax queries in the jquery 'on load' handler,
i.e. like $(function() { $.ajax() ... $.ajax() ... });
I avoided it using:
setTimeout(function_to_do_2nd_ajax_request, 1);
it's presumably a chrome and/or jquery bug

I had this problem because the page I called ajax post from had EnableViewState="false" and EnableViewStateMac="false" but not the page called.
When I put this on both pages everything started to work. I suspected this when I saw MAC address exception.

Your return string data can be very long.
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime maxRequestLength="2147483647" />
</system.web>
For example:
1 Char = 1 Byte
5 Char = 5 Byte
"Hakki" = 5 Byte

I have had similar issues with AJAX code that sporadically returns the "500 internal server error". I resolved the problem by increasing the "fastCGI" RequestTimeout and ActivityTimeout values.

I'm late on this, but I was having this issue and what I've learned was that it was an error on my PHP code (in my case the syntax of a select to the db). Usually this error 500 is something to do using syntax - in my experience. In other word: "peopleware" issue! :D

As an addition to the "malformed JSON" answer, if the query you are running returns an object or anything that prevents the data to be serialised, you will get this error. You should always be sure you have JSON and only JSON at the end of your action method or whatever it is you are getting the data from.

Usually your property is not completely right or something wrong with your server processing.

Categories

Resources