Develop Reference

Issue with passing url in Ajax call through Javascript in a Laravel Project

I started learning Laravel a few months ago. First I developed it on my local machine and later tried to move it to my shared dreamhost hosting. While using the ajax calls in the Javascript code in Vue components, I realized that I need to pass full URL for the route. Hence I created a global variable in resources/js/app.js
window.siteURL = (window.location.host.substr(0,9) == '127.0.0.1') ? "http://127.0.0.1:8000/" : "http://example.com/";
And I created url in my ajax calls like this:
$.ajax({
url: siteURL+'client/notesAjax',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
method: 'post',
I am not sure if this was a good scheme, but it worked.
A few days ago, I registered a domain and tried to run my Laravel project on my AWS EC2 server. After a few hurdles, my Laravel project started running of my domain. However, I realized that I need to empty siteURL for the server on AWS EC2, hence I updated window.siteURL as
window.siteURL = (window.location.host.substr(0,9) == '127.0.0.1') ? "http://127.0.0.1:8000/" : "";
However, some of my ajax calls were still not working. For example, I had an ajax call on the client/notes page:
$.ajax({
url: siteURL+'client/notesAjax',
But this was failing (everything was still working fine on my local pc and the site running on my shared hosting on Dreamhost. Then I figured out that the url that this call was going to was like this:
http://myawsdomain.ca/client/notes/client/notesAjax
Looks like that as the call is being originated from the client/notes page, it was being prepended to 'client/notesAjax' (siteURL is empty). As a hack, I created an extra route in routes/web.php
Route::post('/client/notesAjax',[clientController::class,'notesAjax'])->name('client.notesAjax');
// on AWS, it looks for the route /client/notes/client/notesAjax (client/notesAjax is called from client/notes page)
Route::post('/client/notes/client/notesAjax',[clientController::class,'notesAjax'])->name('client.notesAjax');
I have many other ajax calls that originate from the client/notes page. Using that hack on all those calls may not be appropriate. What is the best way to handle my situation?
Thanks.

unless you are putting your application in a sub-folder, you could've have ommited the base URL for all your HTTP request and everything should have worked without any issue moving from one domain to another.
so if your route end-point is something like /client/notesAjax
your http request should also have been like that
$.ajax({
url: '/client/notesAjax',
.
.
another thing you could do is define APP_URL in your .env configuration like APP_URL=https://mydomain.me
then append that value of config variable in your main index file,
something like
#php
$config = [
'baseUrl' => config('app.url'),
];
#endphp
<script>
window.config = #json($config);
</script>
then use it for all your http request
$.ajax({
url: `${window.config.baseUrl}/client/notesAjax`,

I changed my ajax call from
$.ajax({
url: siteURL+'client/notesAjax',
to
$.ajax({
url: '/client/notesAjax',
and everything started working fine.

Error 400 with ajax request

I am new to web development, and I guess that it is a basic issue, but I couldn't find a solution on the internet.
To start, what I am trying to do is to have a script, loaded on a webpage using TamperMonkey, download a xml file located on a php server.
The process worked perfectly when I tested it on localhost (using MAMP), but then I put it on a 000webhost server, and it's not working, I get an Error 400 Bad request in the ajax response. I also tried on other web hosting services and I get the same error.
On the other hand, the request works perfectly on the 000webhost server when I'm just sending it though my google chrome searchbar. Also, the url to which it is sent is well formed, as when I console.log it, and then click the link, it does what it should.
I am using the GM_xmlhttpRequest method. Here is the code :
let url = some_correct_url;
GM_xmlhttpRequest({
methode: "GET",
url: url,
headers: {
"Accept": "text/xml"
},
onload: function(response){
var r= null;
if (!response.responseXML){
r= new DOMParser().parseFromString(response.responseXML, "text/xml");
}
r= response.responseXML;
console.log(r);
console.log(response.responseText);
});
});

You have a typo in your request body.
Typo: methodE: "GET"
Please correct the typo so it reads method: "GET" and let us know the results.

jQuery not working for getJSON

I am trying to use Bitstamp API. But somehow it is not working.
This is the code:
$.getJSON("https://www.bitstamp.net/api/ticker/", function(person){
$.each(person, function(key, value){
document.write(key+":"+value+"<br />");
});
});
And here is jsfiddle for it: http://jsfiddle.net/mojit/QKTrD/
I am not getting what is wrong here. As when I run the API url on browser it works. But it is nor working when I try to access its parameter using jQuery.
I tried to replace the url with other's API url like MtGox and MtGox works perfectly. But Bitstamp's doesn't.
Can anybody tell me whats going wrong?
Will really appreciate.
Thanks.

You are trying to access a data from another domain. It is called cross-domain request and it is not normally allowed. There is a technique called jsonp and you should check if this is supported by bitstamp. If not, then you should make a proxy. By proxy I mean some local file which uses some server side technology to make get requests. You may implement this in php, nodejs or whatever you are using. And then your js code will make request to a file on your server.
$.ajax({
dataType: "json",
url: "proxy.php",
data: { url: "https://www.bitstamp.net/api/ticker/" },
success: function(result) {
$.each(person, function(key, value){
// ...
});
}
});
So, just pass the url which you want to fetch data from.

jQuery POST to webservice via CORS

I have read a lot of topics about CORS & Javascript and about changing the headers in your post but I can't find the right example I am looking for.
So I'm going to first up start with explaining the situation:
I can not change anything to the webserver since this is out of my reach (It's a SAP Cloud Portal)
I can only change the POST code, so I can only control what I send.
The problem I have is described in the following Post:
jQuery $.ajax(), $.post sending "OPTIONS" as REQUEST_METHOD in Firefox
--> My FF & Chrome Headers send a METHOD OPTIONS instead of METHOD POST.
I have written example code that works in IE but not in FF & Chrome:
var dataString = "<result><firstname>example</firstname><lastname>ThisIsSparta</lastname></result>";
var urlString = "http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post";
//Add TO SAP.
var aData =
jQuery.ajax({
type: "POST",
contentType: "application/xml",
url: urlString, // for different servers cross-domain restrictions need to be handled
data: dataString,
dataType: "text",
success: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("success to post");
},
error: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("fail to post");
}
});
});
Or
var invocation = new XMLHttpRequest();
var url = 'http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post';
var body = '<result><firstname>perthyrtyrtygop</firstname><lastname>sparta</lastname></result>';
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.send(body);
I have found 2 ways to fix this but without any examples:
- do something with a proxy?
- send specific headers
More information about my problem can be found at:
- http://scn.sap.com/message/13697625#13697625

If you can't set the right headers on the server-side and you can't modify the response for jsonP you should indeed use a proxy.
A proxy script is a sort of middleware. You make a request to the script the script gets the data, and returns it to you. For example php proxy. You can make the same thing in asp, jsp, flash or even java applet.
Now you have your SAP service, a proxy (php)file in a your prefered location, and your local javascript in the same domain as the proxy. You don't even need CORS.
If you want to put the proxy in another domain you have to make sure the php file sends the right headers. (Access-Control-Allow-Origin yourdomain or Access-Control-Allow-Origin * for allow all)

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