We Keep Coding

Cannot able to see the AJAX Request Header in chrome Inspect

I'm developing a java based web application. In my application, there are some data that needs to be fetched without page reload. So, I'm using AJAX in jquery framework.
Note: I'm using tomcat web server
$(document).ready(AjaxFunction);
function AjaxFunction(){
$.ajax({
type: "GET",
url : "/DemoApp/sampleData.txt",
beforeSend: function(xhr){
xhr.setRequestHeader("some-custom-header","my-name");
},
//headers: { 'some-custom-header': 'myname' },
success : function(){
console.log("Working !!!");
},
complete : function(){
setTimeout(AjaxFunction, 5000);
}
});
}
Actually the ajax request is successful. But when I try to inspect the request header using the chrome developer tools, I cannot able to find the Request header.
Expected behaviour:
Here we can see that, Request headers is available for dropArea.html
I expect the same for sampleData.txt
Actual behaviour:
Here, Request headers is not available for sampleData.txt

Simple POST request using jQuery leads to unexpected redirect

I've got a few similar POST request on a website. In one case, the request is working (data is stored on the server), but then, there's an unexpected redirect. I send/receive data using jQuery. On the backend, I use the PHP framework Laravel.
Let's say I'm on myapp.dev/clients/123. Then I click the store-data-button and data is sent to/received from the server (Let's assume $('#resubmission_note').val() === 'abc'):
// AJAX request
$('#store-data-button').on('click', function() {
let ajaxRequest = $.ajax({
url: '/resubmissions',
type: 'POST',
data: {
// An integer, some text, and a date
'client_id': $('#id').html(),
'resubmission_note': $('#resubmission_note').val(),
'resubmission_due_date': $('#resubmission_due_date').val()
}
});
ajaxRequest.done(function(returned_id) {
// Removed all code here for testing. Browser still redirecting.
});
});
But then the browser is redirected to myapp.dev/clients/123?resubmission_note=abc.
The network tab in Chrome devtools says
Name:123?resubmission_note=abc
Status: 200
Type: document
initiator: Other
There's data appended in the URL, that should only be the case with GET request, AFAIK. I checked whether some other JavaScript code might interfere, but couldn't find store-data-button or resubmission_note in any unexpected files.
Any advice on how to fix the problem or how to debug it?

Access-Control-Allow-Origin not present for localhost

I'm using the Instagram api and have successfully retrieved an access_token, along with using HTML5 geolocation to retrieve a user's location. This data is then used to construct the string to access the instagram endpoint:
https://api.instagram.com/v1/media/search" + coordsquery + "&access_token=" + access
I have set my redirect uri from Instagram as http://localhost/explorer and my request for access_token in my application is var redirect = "http://localhost/explorer";
However I still get the error. I read that Chrome has a bug or something with localhost and making calls like this so I tried in firefox. Same deal.
I also read somewhere about appending ?callback=? to the GET request url. Also no dice.

I still don't know what was wrong with my original:
$.get(querystring, function( data ) {
console.log(data);
});
but I ended up trying this:
$.ajax({
type: "GET",
dataType: "jsonp",
url: querystring,
success: function(data) {
console.log(data);
}
});
and it worked just fine.
If someone could possibly explain why the second approach worked where the first failed I'd be forever grateful.

Ajax call keeps getting blocked by browser

I am a bit stuck with an issue.
I am developing a small mobile website. I am trying to call a webservice using an ajax call, but the browser keeps blocking my call. If I start up Chrome using the tags... "--allow-file-access-from-files --disable-web-security​​" Then the call works perfectly. I have no issues whatsoever.
Now my problem is if I host the website, the browser is going to block my ajax call and the user cannot for example login or retrieve information. I present my ajax call below...
$.ajax({
async: true,
beforeSend: function () {
},
complete: function () { },
type: 'POST',
url: 'https://MySecretUrl.com/login?format=json',
contentType: 'application/json',
dataType: 'json',
data: '{"UserId":"mySecretUserId","Password":"mysecretPassowrd"}',
success: function (resultMessage) {
if (resultMessage.WasSuccessful == true) {
alert('YAY');
} else {
alert('Semi Yay');
}
},
error: alert('OOOOPS')
});
Does anybody know a workaround for getting information from the webservice without any browser blocking the ajax call ?
Any suggestions would be greatly appreciated.
Thanks in advance for the help.
EDIT
Hi Guys, Ok so I did some more digging and discovered the following.
When the request is made with browser security, the call changes the POST to a OPTIONS. this is called a preflighted request. One workaround that I have found is if you are making a GET call, then you can use jsonp as your data type. But now my problem is that it is incompatible with POST. Is there any fix that does not require the webservice to be changed ?

Is there any fix that does not require the webservice to be changed ?
No. If changing the webservice isn't an option, your only option is to not use the browser to make this request.
You must either make the server return the data in a format that can be accepted cross-domain, or don't make cross-domain requests with the browser.

jQuery and Ajax - cannot POST

I am trying to login to a website using a known username and password and to get some data displayed from the site for a specific user account on that website. I am using jQuery and Ajax for this purpose. This is my code:
$.ajax({
async: false,
cache: false,
type: 'POST',
dataType: 'json', // json...just for example sake
data: ({
'login_username': username,
'secretkey': password
}),
url: 'https://mail.someserver.com/src/redirect.php',
success: function (data) {
alert("SUCCESS!")
if (data === '1') { // server returns a "1" for success
// success!
// do whatever you need to do
} else {
// fail!
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// something went wrong with the request
alert("Failed!");
}
});
I've already made my search around the web and I know that browsers do not permit cross server ajax calls to prevent security issues, but I've already tried to use "jsonp" as dataType to no avail :(
So, what am I doing wrong?

Be sure that your url is not breaking the same origin policy -- that is, the request coming from the client cannot request data from a server from a different domain (there are exceptions to this rule, namingly CORS, but that requires that you make changes to the server/application you're talking to).
The solution to your problem would be to make the request from some server-side script, then in turn having your client application query that script, based on the same machine that's serving the application to the web.

My fault isn't at the code above, my fault was that in my manifest file (I am building a Google Chrome extension) I didn't have set proper permissions (https://*).
Sorry for the frustration!