Develop Reference

Ajax request being blocked/canceled

I have two different apps hosted under two different domains.
Once the user is logged in app 1 (hosted on aws) and click on the "my profile" button, he/she is redirected to a html page that contains an ajax form.
This ajax form makes a request to app 1's backend and the backend responds with a html form already filled with the infos needed to send the user logged to app 2 (hosted on IIS). This html response also contains a <script> tag with a .submit() function to automaticaly submit the form.
The ajax then place this html form inside a given <div> and the form is submited to app 2.
The problem is that the submition of the form is being blocked... I doesn't say why, but in the browser's Network tab, the status appears as "canceled".
I can imagine that the issue might be related to CORS, but I'm not sure since it doesn't give the cors error explicitly.
Also, it works when running app 1 in localhost.
Edit:
It seems that is not the form submition that is being blocked, but maybe the ajax request to the api asking for the form or the api response containing the form... I'm not sure.
At first, when the ajax request POST to the api, the Network tab shows this (image 1).
Then, when I get the canceled/blocked error, it shows this (image 2)

Listen to Http server-side Request (document type) Events via Javascript

I am trying to show a gif or message at the moment user click on the link or change URL to send a request to server-side (no ajax call). My reason is: some pages take some seconds to be processed and it would be better user see a loading message while the request is processing.
I tried to listen to server-side events. I checked chrome how it works and captures this kind of requests.
chrome differentiate these types of requests with others base on the document type.
My exact question is: How can I capture/listen to the HTTP request with document type via Javascript at the moment of sending the request to server?

I found the solution with using window.onbeforeunload() function. this event rise whenever any refresh or load happens.
window.onbeforeunload = function (evt) {
console.log("onbeforeunload Call listen to refresh event on _layout page.")
ShowWaiting(true);
}

Pending request in AngularJS application

I noticed that when I was "away from keyboard" over 5-10min and I make a call to backend (GET, POST or something) the first call is directly the request in question and the browser not send before the OPTIONS request so the call remains pending and if I make a second call works fine, because send first the OPTIONS (the browser understands that it doesn't send OPTIONS call before) and after successfull response start the GET...
I think the browser cache the "Authorization of request" and that's is why the first call after some minutes goes in pending: browser doesn't send OPTIONS call before...
I use Chrome and I never tested with Firefox or something else...
It's a big problem because if a user is afk for some reason, he need to press button twice for what he need to do.
Anyone know fix/trick to avoid this? I'm working on angularjs applications, and the http request are made with $http.

Validate a Django Form with external POST action

I have a Django form, which sends the form data to an external source(to be more precise, it is a PayPal payment form). The user enters the price for the product, clicks on the button and the POST request is send to PayPal triggering the normal payment process.
Now I want to use OTP (like Google Authenticator) to validate each payment.
How should the validation be realized? I thought of several scenarios, but none of them is really satisfying:
Should I send the request first to my site, validate the OTP and then redirect the User to the PayPal site with the data via a POST request, coming with the request? Problem: POST requests are not meant to be redirected and I don't know, how to realize it in django.
Should I write JavaScript code, which sends an ajax request to my site, and "activates" the form on success? Problem: smarter users could just activate the form from the browser console, without sending the ajax request. Does anybody know some kind of activation trick in JavaScript, which is not "hackable"
I would be glad to hear some more solutions from you or some suggestions, how the solutions above could be realized without the problems mentioned.
EDIT - My Solution so far:
I have done a work around and split the form in two. The first form checks the OTP and sends the data to my internal django view. It also creates a model instance with an generated invoice, which can then be checked in the PayPal IPN routine. The second form is a PayPal payment form, which sends the POST request to PayPal. You can find the simplified code in the following Github-Gist:
https://gist.github.com/BloodyD/2cd15f38d0f666cf3a73

First method - normal redirection after POST:
I don't know why do You think that there shouldn't be any redirect after POST request? In django it happens all the time, without that each page refresh directly after adding something to database will trigger adding it one more time.
To redirect user into proper paypal page, you can just send HttpResponseRedirect instead of normal response when form is submitted with valid form data. If not, display some error messages.
2nd solution: using javascript.
You can send url to redirect to (paypal url) in AJAX response, so user won't be able to bypass this. Simply put some form submitted by AJAX, if it returns URL to redirect, just redirect user. If not, display error message.

$.getJSON on chrome extension fails to work properly

I'm creating a chrome extension, and want to be able to get a profile picture from a username. Unfortunately, there isn't an api for the website and there is no correlation between the profile URL and the profile name. I figured I could hijack the search ajax and use it to achieve my goal. Unfortunately, it doesn't seem to be working. I've added the permissions, and it isn't running in a content script, but it's still not working.
$.getJSON("http://www.website.com/user/search",{user:name},function(a){
alert(1);
alert(a.data);
});
It's failing silently, as nothing is happing. Yet, I can't figure out why.
The json I should be receiving from the call (browsed to the site manually) is:
{"error":false,"action":null,"one":true,"data":143217}
Unfortunately it's not working. JSONP isn't an option, as the site obviously has no need of supporting it, so help me please. I don't see what I'm doing wrong.
EDIT: I see the problem. When I try to do the request I'm being redirected to user/search ( no ?user) which fails.

The site you're trying to reach requires authentication before allowing a search to occur. You won't get a response from your ajax request, because the server is looking for a session with login credentials to allow the search to happen. Because your ajax is not authenticated, and does not have the session established, your request doesn't "fail", it is simply getting the server's 302 redirect response.
You would need to 'sign in' to the page you are trying to query in order to establish the session and any necessary variables before you would be able to proceed with your user search.

It could be entirely possible that the website's search API isn't returning the Content-type header as text/json, which is required for $.getJSON to function correctly.
Try simply using $.get and calling JSON.parse on the returned data.