add header in ajax for Cross-Origin, not working - javascript

When I add header HTTP_X_REQUESTED_WITH in ajax for request to another server then it give erorr as Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.xxxxxxxxxxxx.com/checkurl.php?action=xxxxxxx. This can be fixed by moving the resource to the same domain or enabling CORS.
and if I remove this header it working properly.
I have many ajax request so I use this format to add header in all ajax request
$(document).ajaxSend(function (event, jqxhr, settings) {
jqxhr.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest')
});
and my ajax is :
$.ajax({
url:sitePath+'Xxxxxxxxx/checkurl.php?action=Pages&page='+actionPage,
type :'POST',
crossDomain:true,
success : function(data){
hideLoadingDiv();
if(data.getElementsByTagName("message")[0].getElementsByTagName("messageType")[0].childNodes[0].nodeValue=="SUCCESS")
{
document.getElementById(divID).innerHTML=data.getElementsByTagName("PageBody")[0].childNodes[0].nodeValue+'<span><a onclick="return checkRegistrationValidation();" href="javascript:void(0);" class="orengeBtn">Back</a></span>';
displayDiv(divID);
}
else if(data.getElementsByTagName("message")[0].getElementsByTagName("messageType")[0].childNodes[0].nodeValue=="ERROR")
{
showErrorMessage(data.getElementsByTagName("message")[0].getElementsByTagName("messageText")[0].childNodes[0].nodeValue);
}
else
{
generalError();
}
},
error:function(xhr,ajaxOptions, thrownError){
hideLoadingDiv();
if(xhr.status==200){
generalError();
}
else{
networkError();
}
if(debugMode==1){
displayAjaxError(xhr,thrownError);
}
}
});
and in my server file I use
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type')
but it give error every time when I add header. And after remove working properly. Please help.

You can find answer here:
Cross-Domain AJAX doesn't send X-Requested-With header
You have to either add the headers manually in your ajax:
$.ajax({
url:sitePath+'Xxxxxxxxx/checkurl.php?action=Pages&page='+actionPage,
type :'POST',
crossDomain:true,
headers: {'X-Requested-With': 'XMLHttpRequest'}
or make the request not crossdomain:
$.ajax({
url:sitePath+'Xxxxxxxxx/checkurl.php?action=Pages&page='+actionPage,
type :'POST',
crossDomain:false,

Related

CORS/Preflight error with WorldPay AJAX request

I'm picking up on someone else work with a custom template, and I'm getting the following error:
Failed to load https://api.worldpay.com/v1/orders: Response to the preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.xxx.xxx.xxx' is therefore not allowed access.
Here is the code that sends the AJAX request:
$.ajax({
type: "POST",
url: "https://api.worldpay.com/v1/orders",
dataType: 'json',
async: false,
headers: {
'Access-Control-Allow-Origin': '*',
"Authorization": worldPayServiceKey
},
data: JSON.stringify(options),
success: function (response){
if (response.paymentStatus == 'SUCCESS') {
current_booking.payment = obj.response;
} else {
alert("Sorry, there was a problem with your payment. We will send you an invoice instead.");
}
makeBooking();
}
});
I've had a similar problem with CORS before, but I haven't seen the preflight error before. Can anyone help, please?
please remove the Access-Control-Allow-Origin header from request header. that is a server side header.
Then add Content-Type as,
application/x-www-form-urlencoded,multipart/form-data or text/plain depending on what you are sending with the request. for example,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": worldPayServiceKey
},
The only allowed values for the Content-Type header are:
> - application/x-www-form-urlencoded
> - multipart/form-data
> - text/plain
for more info, read the MDN DOC.
Hope It helps. good luck.

$.ajax requests with CORS

I'm having troubles with an AJAX request. I was getting the below error:
Error: Access is denied
I tried this jQuery AJAX request:
$.support.cors = true;
$.ajax({
url: 'http://testwebsite.com/test',
type: "GET",
dataType: 'json',
contentType: 'application/json',
crossDomain: true,
headers: {
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': 'http://testwebsite/test',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Credentials': 'true'
},
xhrFields: {
withCredentials: true
},
success: function(data) {
alert("Data from Server" + JSON.stringify(data));
},
error: function(jqXHR, textStatus, errorThrown) {
alert("You can not send Cross Domain AJAX requests: " + errorThrown);
}
});
Can anyone kindly let me know what I am missing. Thanks in advance.
As rory-mccrossan mentioned in a comment, CORS protection is designed so that a website cannot directly access the content of another website (in a browser) unless the website being accessed agrees to it.
It would completely ruin the point of CORS if a site just has to send some headers in order to circumvent the defence
Instead, you will need to use a CORS proxy. It's a server that when given a request like yourCORSproxy.example.com/http://testwebsite/test would load the page and return it, but with CORS allowed (like a normal proxy but with CORS enabled).
One of these CORS proxies is https://crossorigin.me, but at the time of writing this it is down. It might be more stable if you simply create your own proxy.
tl;dr: testsite.test should be sending the headers on its response. You should not be sending the headers on your request.

CORS not allowing jquery AJAX get results

I am calling an AJAX function in my script from a server of IP - 128.119.30.12:7080 (for example)
Cross Domain: port number are different, so I get error of incompatibility.
$.ajax({
url: "http://128.119.30.12:9000/callback.php",
data: dataObj,
type: "POST",
contentType: 'text/plain',
sucess: function(data,status){
reply = data;
},
error : function(xhr, status, error){
reply = {"error": "Error in fetching data"}
}
}).done(function(reply) {
replyCall(reply);
});
function replyCall(data) {
console.log(data);
}
I have enabled the mod_header function in my Apache server. And setting up header in the called php script - here is the script of php
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
print 'Hellooooooooo Response';
?>
It is still causing errors on chrome -
XMLHttpRequest cannot load http://128.119.30.12:9000/callback.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://128.119.30.12:7080' is therefore not allowed access.

Rails CORS and jQuery autocomplete

I have a little Rails based API. I'm trying to fetch data and show it in select via jQuery UI autocomplete. But there is an error:
XMLHttpRequest cannot load http://api.exline.systems/regions/origin?title=%D0%95%D1%81. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.
I have made all work with headers. For example, if I make direct request via browser:
http://api.exline.systems/public/v1/regions/origin.json?title=%D0%B0%D0%BB
I can see that all headers are served by server:
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods:POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
But using this code, headers are not served by server:
$(function() {
$( '#calc-origin-ajax' ).autocomplete({
source: function (request, response) {
$.ajax(
{
url: 'http://api.exline.systems/regions/origin',
dataType: "json",
data: { title: request.term },
success: function (data) { response(data); }
});
}
});
});
What should I do to make it work?
Why do you provide a link to
http://api.exline.systems/public/v1/regions/origin.json
But trying to make request to
http://api.exline.systems/regions/origin
With the first link all work fine: JSFIDDLE

setRequestHeader not working, I want to set my header and then make a GET request in ajax in Amazon EC2

I am trying to make a GET request and for this I am supposed to send header values, I Have tried the methods below. This API call seems to be working fine in POSTMAN extension I use to test the API's
$.ajax({
url: "requested url",
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('setHeader', '12345');
},
success: function (data) {
console.log(data);
},
error: function () {
alert("Failed");
},
});
AJAX request seems to be working fine, but the moment I add a header via beforeSend or headers, an OPTIONS pre-flight request is made and the GET request is aborted.
I have also tried setting the headers using $.ajaxSetup();
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('setHeader', '12345');
}
});
$.ajax({
type: "GET",
url: "requested url"
}).success(function (data) {
console.log(data);
}).error(function () {
alert("Failed");
});
Request headers :
Request URL:requested url
Request Method:OPTIONS
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, setHeader
Access-Control-Request-Method:GET
Response headers :
Access-Control-Allow-Headers:Content-Type, Accept, X-Requested-With,setHeader
Access-Control-Allow-Method:GET,POST,PUT,OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:*
I get this error in my console :
XMLHttpRequest cannot load "requested url". Invalid HTTP status code 404
Maybe your problem is jsonp related. Just guesing here.
what-is-jsonp-all-about
can-i-set-headers-in-cross-domain-json-requests
Check your server headers aswell.

Categories