Ajax Request Fails why? - javascript

following my code:
$('#btnOK').click(function(e){
e.preventDefault();
$form = $('#testForm');
dataString = $form.serialize();
$.ajax({
type: "POST",
url: 'https://abc.com/login',
data: dataString,
dataType: 'xml',
success: function( returnData ) {
alert(returnData);
}
});
});
My Code fails to make ajax request to http://abc.com/login page and doesn't gives out result. What's the mistake here?
Is it due to cross domain likely:
my domain: http://xyz.com
login domain: http://abc.com/login

unless your abc.com domain is configured to deal with cross-origin policy, you won't be able to make a cross-domain ajax call
A solution is to redirect your ajax call to a server side proxy under xyz.com domain who send your data and get the response from abc.com (e.g. using CURL).
or if you're in control of abc.com domain you could send proper headers (Access-Control-*) to allow crossdomain calls

my domain: http://xyz.com
login domain: http://abc.com/login
This is cross domain issue you can get over with
Proxy on your site
JsonP support from abc.com site
If you just want to post and dont care what result is, you can create a form and a iframe then set target of the form to that iframe, then just post (wont work with csrf enabled site)

Just debug it use chrome or ie debugger, make a breakpoint at the entry of the click() function, and then step by step, you'll find the problem.

Related

Send Ajax Request For Sending Post Data One Url to Another Url Without Getting CROS ERROR

-> Please Help Me To Solve The Problem
-> I Send Data To Another URL for Process Something And That Web Page is another Server and Different URL.
-> When Ever I Try To Send Post Data That time i Faced CROS Error i try many ways.
-> See My Code
$.ajax({
type: 'POST',
url: 'Another Non Https Url',
crossDomain: true,
contentType:'application/json',
data:{CompanyEmail:CompanyEmail,CompanyName:CompanyName,CompanyPhoneNumber:CompanyPhoneNumber,AccessToken:AccessToken},
success: function(){
alert("Success");
},
error: function(){
alert("Failed");
}
})
CORS (meaning "Cross Origin Resource Sharing") is a server-side mechanism to allow exceptions in the so-called Same-Origin-Policy. Otherwise processing data from another origin is prevented.
You have to explicitly enable CORS for your client within your server.
This can't be fixed in your client-side jQuery-Code.
PHP-side you are able to activate CORS for all clients by using
<?php
header("Access-Control-Allow-Origin: *");
?>
though.

Consume Restful request JSON

When I test the code below it only fails
Any Ideas? The link works fine
$.ajax({
url: 'http://ulacit3352.cloudapp.net/Login/webresources/generic/search/gera',
type: 'GET',
datatype: 'json',
success: function(data) {
alert("works")
},
error: function() {
alert("it does not");
}
});
I get this on Chrome:
The response of the link is not of type "json", instead, it is a plain text, therefore it cannot be parsed. You should change to
dataType: 'text',
Also, for normal ajax, you need to make sure the url is in the same domain of the webpage, which means the code should reside at http://ulacit3352.cloudapp.net/ as well. Otherwise, you should seek for "jsonp" or (better) some server-side solution, such as setting Access-Control-Allow-Origin or make your server as a proxy of the request.
The requested url is server on http which will give rise to This request has been blocked; the content must be served over HTTPS error since the connection is open for eavesdropping and man-in-the-middle (MITM) attacks. It is better to use https provided the url accept https request.
Still there is way to bypass the issue. You can check this LINK

How to solve error "Access-Control-Allow-Origin" from javascript?

I'm developing chrome extension and I want to get HTML content from URL, and I have a code as below:
function getContentHTML() {
var theUrl = 'http://tuoitre.vn/The-gioi/620269/my-cong-bo-anh-ve-tinh-nga-ban-ten-lua-vao-ukraine.html';
$.ajax({
url: theUrl,
crossDomain: true,
dataType: "html",
type: "GET",
success: function (data) {
document.write(data);
}
});
}
My problem is: Some website I can get HTML content but some website I can not get HTML content and show error is "Access-Control-Allow-Origin". I'm also follow in google but I can not solved.
This means that the site doesn't allow your page's origin to query its content via ajax. This is disallowed by default because of the Same Origin Policy, but can be enabled by the site owner via Cross Origin Resource Sharing.
If the site doesn't allow your origin to access it, you cannot solve it client-side. You'd have to do something like query the information from your server (which would in turn use server-side code to query it from the other site, and then return it to you).
there are sites on which server will not accept requests from third-party domains. This problem has no solution.

Trouble performing simple GET request returning JSON with Javascript

I'm horrible at Javascript, so sorry in advance for what I'm going to go ahead and assume is an amazingly stupid question.
I'm simply trying to perform a GET request to GitHub's public repo API for a given user, and return the value as JSON.
Here's the function I'm trying to use:
function get_github_public_repos(username) {
var the_url = "http://github.com/api/v2/json/repos/show/" + username
$.ajax({
url: the_url,
dataType: 'json',
type: 'get',
success: function(data) {
alert('raw data: ' + data)
var json_response = $.parseJSON(data);
alert(json_response);
}
});
}
This is returning Null for data. And in the console, I see Failed to load resource: cancelled. I know the URL is correct, because if I run curl on the url, it returns the expected data.
jQuery's ajax function supports JSONP which allows cross-domain requests (which you need because you're trying to request data from github.com from another domain). Just change the dataType from 'json' to 'jsonp';
function get_github_public_repos(username) {
var the_url = "http://github.com/api/v2/json/repos/show/" + username
$.ajax({
url: the_url,
dataType: 'jsonp',
type: 'get',
success: function(data) {
var json_response = data;
alert(data);
}
});
}
UPDATE: It's import to note that the end pint (in this case github.com's API) has to support JSONP for this to work. It's not a guarnateed solution for ANY cross-domain request as pointed out in the comments.
JavaScript is subject to cross-domain restrictions when making requests on a different server.
Well, unless you run your code in the github.com domain, that won't work.
You can use simle ajax only in your domain.
One solution is to create a proxy for it. Make a page on your server that does one thing, gets your requested (out of domain) content with curl, and prints it. Then you call this proxy with ajax.
The XmlHttpRequest object (which $ajax uses) cannot download content from a different domain due to the same origin policy. You would need to use something such as JSONP to be able to do this from a browser.
As the others have said, you cannot execute ajax on a remote domain.
You will need to write a server sided script on your domain (such as php), that will do the dirty work retrieving the information needed from the github domain.
Then, use your ajax to query your server side script for the information.
I know the URL is correct, because if
I run curl on the url, it returns the
expected data.
Use that idea to get your ajax working. Create a proxy page on your site that uses curl to retrieve the data you want, then have your "the_url" variable point to that page on your site. Cross-domain restrictions prevent you from being able to use ajax in the manner you attempted.

Basic Authentication with jQuery.ajax request and jsonp

I have some local html/js files with which I'd like to invoke some remote servers via https and eventually use Basic Authentication for the request.
I am encountering two problems. First is that if I don't specify 'jsonp' for the dataType, jQuery.ajax() request returns the error:
Access to restricted URI denied code:
1012
Are my requests considered cross-domain because my main work file is stored locally, but retrieving data from a server elsewhere?
So fine, I update the call so it now looks like:
$.ajax({
url: myServerUrl,
type: "GET",
dataType: "jsonp", // considered a cross domain Ajax request if not specified
username: myUsername,
password: myPassword,
success: function(result)
{
// success handling
},
error: function(req, status, errThrown){
// error handling
}
})
Because I need to use Basic Authentication, I'm passing in the username/password but if I monitor the request, I don't see it being set and additionally, the server sends an error response since it doesn't have the expected info.
Additionally, because I have jsonp set, beforeSend won't get invoked.
How do I pass along the credentials using Basic Authentication for this request?
The short version is you can't do this. Your suspicions are correct, because you're local and these files are remote, you can't access them, you're being blocked by the same-origin policy. The work-around for that is JSONP, but that really doesn't seem to apply to your situation...
JSONP works differently, it's a GET request via a <script> tag include to get the file, so you're not sending special headers or anything.
You'll need to proxy the request through the server you're on (the domain of where this script is running) or another proxy option, but going from the client to another domain is blocked, mainly for security reasons.
Try doing http://user:password#restservice. This mimics a basic-auth request.
I think you'll have to add a server proxy of some sort. JSONP is just a particular way to use a script tag. Thus, it doesn't allow setting arbitrary headers. And of course, you can't do a cross-origin XHR.

Categories

Resources