CODEWITHSUNDEEP
javascriptjquery
Shaik
Shaik

Reputation: 930

Javascript No 'Access-Control-Allow-Origin' header is present on the requested resource on load of different url

I am trying to load value from different url to a div, When that is loaded it gives me an error. I tried to google a lot. I didn't find a fix. I am aware that this question is already asked but still nothing solved my problem.

XMLHttpRequest cannot load http://bulksms.icubetech.com/api/checkbalance.php?user=&pass=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.w3schools.com' is therefore not allowed access.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("http://bulksms.icubetech.com/api/checkbalance.php?user=&pass=");
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

Upvotes: 1

Views: 1658

Answers (3)

Charlie
Charlie

Reputation: 23798

The response you get from http://bulksms.icubetech.com/api/checkbalance.php should include the Access-Control-Allow-Origin in it's header.

It should be something like:

Access-Control-Allow-Origin: yoursite.com

You can't access this site via ajax if the above requirement is not fulfilled.

Alternatively, you can use a proxy php script to get this done. The idea is to get a php script in your own domain to talk to the site you are trying to access and give you the result. This will not raise any cross domain issues since your browser communicates only with a php script in your own domain. Here is a sample proxy script. Please change it to suite your needs.

<?php

// Allowed hostname
define ('HOSTNAME', 'http://Your_Server/');

//returns the headers as an array
function getHeaders()
{
    $headers = array();
    foreach ($_SERVER as $k => $v)
    {
        if (substr($k, 0, 5) == "HTTP_")
        {
            $k = str_replace('_', ' ', substr($k, 5));
            $k = str_replace(' ', '-', ucwords(strtolower($k)));
            $headers[$k] = $v;
        }
    }
    return $headers;
} 

// Get the REST call path from the AJAX application
$path = $_REQUEST['path'];
$url = HOSTNAME.$path;

// Open the Curl session
$session = curl_init($url);

// If it's a POST, put the POST data in the body
if ($_POST['path']) {
 $postvars = '';
 while ($element = current($_POST)) {
  $postvars .= key($_POST).'='.$element.'&';
  next($_POST);
 }
 $postvars = substr($postvars, 0, -1);  // removing trailing &
 $postvars = str_replace('xml_version', 'xml version', $postvars);  // fix xml declaration bug?
 $postvars = stripslashes($postvars);

 curl_setopt ($session, CURLOPT_POST, true);
 curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}
else {
 //If it's a post, but not a form post (like a SOAP request)
 if ($_SERVER['REQUEST_METHOD']==='POST') {
  curl_setopt ($session, CURLOPT_POST, true);
  curl_setopt ($session, CURLOPT_POSTFIELDS, $HTTP_RAW_POST_DATA);

  $headers = getHeaders();
  $header_array = Array( "Content-Type: text/xml", "SOAPAction: " . $headers['SOAPAction']);
  curl_setopt ($session, CURLOPT_HTTPHEADER, $header_array);
  curl_setopt ($session, CURLOPT_CUSTOMREQUEST, "POST");
 }
}

// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

// Make the call
$xml = curl_exec($session);

// The web service returns XML. Set the Content-Type appropriately
header("Content-Type: text/xml");

echo $xml;
curl_close($session);

?>

Upvotes: 1

jithin
jithin

Reputation: 1482

This issue apparently has nothing to do with your front end code. The server you are trying to access should allow requests from other domains. In your case bulksms.icubetech.com does not allow CORS request from domain www.w3schools.com.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

The reason why this request is failing is because the remote domain you are trying to make an AJAX request to doesn't send proper CORS headers. So the browser will block the request. You should talk to the administrators of the bulksms.icubetech.com to explicitly enable CORS for your own domain.

Upvotes: 0

Related Questions