JSONP not working for cross domain AJAX - javascript

I've look at all the cross-domain ajax questions, and still cannot figure out what is wrong with my JSONP request. All I am trying to do is get the contents of an external page, cross domain using JSONP. Unfortunately, firefox still gives this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stackoverflow.com/?_=1415036764663. This can be fixed by moving the resource to the same domain or enabling CORS.
Code:
var url = "http://stackoverflow.com";
$.ajax({
url: url,
type: "GET",
datatype: "jsonp", //allows cross-domain ajax without cors (GET only)
async: true,
cache: false,
timeout: 15000,
success: function(html) {
console.log(html);
}
});

You have a small typo there:
…
dataType: "jsonp", // dataType instead of datatype
…
JavaScript variables and object properties are case-sensitive.

Related

Getting parse error while fetching text file content in JQuery

I am trying to fetch data from text file which resides on server. I have access of that location and able to see content when I put URL in browser tab.
I am trying to make AJAX call and get file content, but I am getting Error: Uncaught SyntaxError: Unexpected identifier
Code
function logResults(json){
console.log(json);
}
$.ajax({
url: u,
dataType: "jsonp",
jsonpCallback: "logResults"
});
on console,
I tried below code too, but same result,
$.ajax({
type: 'GET',
url: u,
crossDomain: true,
dataType: 'jsonp',
async: false,
headers: {
"Access-Control-Allow-Origin": "*"
},
success: function(succ) {
console.log("Success: ", succ)
},
error: function(err) {
console.log("Error: ", err)
}
});
This code is always going into error block.
You said:
dataType: "jsonp",
But the URL is responding with:
Deployment automatically finished…
Which is not JSONP, it is plain text.
You get the error when it tries to execute the plain text as JSONP.
Don't put wrong information in the dataType field.
async: false,
That's deprecated. Don't use it. It's also pointless since you are using callbacks.
It's also incompatible with JSONP so it is ignored (until you remove the incorrect dataType).
crossDomain: true,
This has no effect unless you are making a:
non-JSONP request
to the same origin
which gets redirected to a different origin
… which is very rare.
headers: {
"Access-Control-Allow-Origin": "*"
},
Access-Control-Allow-Origin is a response header. It doesn't belong the request. Trying to add it to the request will cause extra problems as it will make the request preflighted.
(At least, that would be the case if you hadn't said dataType: 'jsonp' because adding request headers is incompatible with JSONP).
All you need on the client
The only code you need on the client is:
function logResults(result){
console.log(result);
}
$.ajax({
url: u,
success: logResults
});
The server you are requesting the data from will need to use CORS to grant you permission to access it if it is a cross-origin request.
It is because you have added dataType as jsonp, so that it will try to parse the response to JSON and if the response is not a JSON it will throw error.

Javascript cross-domain request

I have a problem.
Is it possible to make a request to a different domain? For example, I have a website test.com and it has to take some data from http://www.google.lv/search?q=fat+pumpkin. I already have tried jQuery .load method, XMLHttpRequest(), but the result is always the same, I get error: Failed to load https://www.google.lv/search?q=fat+pumpkin&.rtng: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Is there some option to overcome it without PHP or another server language?
The same question as your case : Access-Control-Allow-Origin error sending a jQuery Post to Google API's.
Basically you need to add a crossDomain option for ajax request, example:
$.ajax({
url: 'https://www.googleapis.com/moderator/v1/series?key='+key,
data: myData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() { alert("Success"); },
error: function() { alert('Failed!'); },
beforeSend: setHeader
});

Get html file from a given url using javascript($ajax)

var $ = require('jquery');
$.ajax({
type:"GET",
dataType: 'html',
url: 'http://www.google.com/',
success: function(res){
console.log(res);
}
});
I am getting this error in the console:
XMLHttpRequest cannot load http://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
What can I do to avoid this error? Please help.
If you control the backend, you can proxy this request to the backend, i.e. using PHP:
// get.php
echo file_get_contents($_GET['url']);
// frontend JS
$.ajax({
type:"GET",
dataType: 'html',
url: '/get.php?url=http://www.google.com/',
success: function(res){
console.log(res);
}
});
PHP will be able to fetch the data, as it's not checking CORS.
You cannot send cross origin requests because it is a security vulnerability.
Its because google.com goes not have cross origin requests enabled. If you try a site that does like for example:
$.ajax({
type:"GET",
dataType: 'html',
url: 'https://cors-test.appspot.com/test',
success: function(res){
console.log(res);
}
});
Then you will get the desired result
I think this is because of security problem while fetching another domain.
Please check this
"No 'Access-Control-Allow-Origin' header is present on the requested resource"

java script to get xml from url

I am writing a js to get a xml from a url but i am not getting any response.Anything I am doing wrong?
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.w3schools.com/xml/simple.xml",
dataType: "xml",
success: function(response)
{
alert(response);
}
});
});
http://jsfiddle.net/4bh0qpb1/1/
First script syntax error (") that you have fixed, although you can't access following url http://www.w3schools.com/xml/simple.xml using ajax due to CORS (Cross-origin resource sharing) Policy.
Reason
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.w3schools.com/xml/simple.xml. This can be fixed by moving the resource to the same domain or enabling CORS.
You forget to end url parameter with double quote "

Request JSONP with text/plain MIME Type

I'm trying to use JSONP to request a feed on another domain. I know that the content type should be JSON or JavaScript, but it is text/plain and I don't have control over the server so I can't change the header. How can I get an AJAX call to work?
Here is what I have so far -
function asdf() {
$.ajax({
url: "http://example.com/path/to/sharepoint/_vti_bin/listdata.svc/TestCalendar/$count",
jsonp: "callback",
dataType: "jsonp",
contentType: "text/plain",
// work with the response
success: function( response ) {
console.log( response ); // server response
}
});
}
If I just try a regular request, obviously I just get a CORS error.
XMLHttpRequest cannot load http://example.com/path/to/sharepoint/_vti_bin/listdata.svc/TestCalendar/$count. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 401.
Try to execute directly your URL in a browser to be sure that all is working fine
After that, try with this JQuery configuration:
$.ajax({
url : "YOUR_URL",
dataType : 'jsonp',
crossDomain: true,
type : 'POST',
timeout : 30000, // in milli seconds
cache : false
success:function(response) {
console.log(response);
}
});

Categories

Resources