Question

33

Bypassing CORS with PHP and Javascript/Ajax

rated 0 times [ 37] [ 4] / answers: 1 / hits: 18480 / 9 Years ago, fri, april 24, 2015, 12:00:00

I've been trying to figure this out for hours, though I'm too uneducated in web development to understand. Heres the case:

Another website has a script that they obtain information from the following way:

    var url = numbers.php;

parameters = scoreid= + document.getElementById('whatscore').value;

parameters += &num= + document.getElementById('num1b1').value;



xmlhttp2=GetXmlHttpObject();

if (xmlhttp2==null) {

    alert (Your browser does not support XMLHTTP!);

    return;

}



xmlhttp2.onreadystatechange = function() {

    if (xmlhttp2.readyState==4) {

        scorespot.innerHTML=xmlhttp2.responseText;              // load 

        setScores(document.getElementById('gradelvl').value);   // set 

        document.getElementById('submitscorebtn').style.display=none;

    }

}

xmlhttp2.open(POST,url,true);

xmlhttp2.setRequestHeader(Content-type, application/x-www-form-urlencoded);

xmlhttp2.setRequestHeader(Content-length, parameters.length);

xmlhttp2.setRequestHeader(Connection, close);

xmlhttp2.send(parameters);

I've attempted to do the same thing, though when I attempt it I get the cross-origin error. I know their are ways to do it with jsonp and other things, though I have no clue where to start at all for this.

When I attempt to directly request information from their page, the numbers.php page, such as example.com/numbers.php?scoreid=131&num=41 . I always get returned with Error: incorrect parameter syntax.

Can anybody please tell me how I would fix this in my case? I only know PHP and Javascript well, I'm very uneducated with Ajax and other things or external libraries.

I appreciate all help whatsoever!
NOTICE: I DO NOT HAVE ACCESS TO THE WEBSERVER.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briannar

Add To Favorites

Follow

Total Points: 354

Total Questions: 103

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

briannar questions

1 Cookies.get() is undefined

Tue, Aug 31, 21, 00:00, 3 Years ago

1 How to center a button in Javascript

Sat, Jun 26, 21, 00:00, 3 Years ago

1 How is the nullish coalescing operator (??) different from the logical OR operator (||) in ECMAScript?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 3D Image rotation CSS

Sat, Jun 20, 20, 00:00, 4 Years ago

1 Three.js error --> THREE.Scene is not a constructor

Tue, Apr 7, 20, 00:00, 4 Years ago

View All

answered 9 Years ago odaliss · Accepted Answer

If you do not have access to your server configuration, and if you do not control the external php script (assuming it's not set up to serve as a reverse proxy), then you absolutely cannot use a standalone javascript solution for this.

Rather, you would have to make the external request from your own local php script. Then you would call your local php script from Ajax, and this will work since you are accessing a local file, and thus not violating CORS.

Here is an example of an Ajax call thru a local PHP script.

Imagine a scenario where you allow users to lookup an album name. The user enters the name of the song, and the artist. You make a request to a 3rd party api, and return the response back to the user via a JavaScript alert notification. For this example, assume the user enters 'Black' and 'Pearl Jam' as the song and artist names

Ajax POST to Local PHP Script with HTML Example:

<html>

  <head>

  <!-- Load jQuery Library from Google -->

    <script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js> </script>

  </head>        



  <body>

    <h1> Ajax to local PHP Script Example: </h1>



    <form id=getArtist>

      Artist: <input type=text placeholder=Pearl Jam>

      Song: <input type=text placeholder=Black>

      <input type=submit value=Click Here to Active Ajax Call>

    </form>



  </body>

</html>



<script type='text/javascript'>

$(#getArtist).submit(function(event) { //Listen to when the Submit is pressed

    event.preventDefault();  //Stop the submit from actually performing a submit

    $.post(local_script.php, { song: Black, artist: Pearl Jam, dataType: json}) //prepare and execute post

        .done(function(response) { //Once we receive response from PHP script

            //Do something with the response:

            alert(The album name is:  +response);

            //Look into JSON.parse and JSON.stringify for accessing data 

         });

    });

</script>

PHP GET

<?php

$url = 'http://api.music.com/album';



$song = urlencode($_GET['song']));    //Need to url encode

$artist = urlencode($_GET['artist']); //Need to url encode



$response = file_get_contents($url .'?song=' .$song .'&artist=' .$artist);

    //**The url looks like http://api.music.com/album?song=Black&artist=Pearl+Jam



//** For purposes of this demo, we will manually assume the JSON response from the API:

$response = '{ album: Ten }'; //(Raw JSON returned by API)

echo $response; //Return the response back to AJAX, assuming it is already returned as JSON. Else encode it json_encode($response)

PHP POST (using curl)

<?php

$url = 'http://api.music.com/album';



$song = urlencode($_GET['song']));    //Need to url encode  

$artist = urlencode($_GET['artist']); //Need to url encode



//$headers = array(Key:  .Value,Key:  .Value, //Set any headers, if required.



$post = 'song=' .$song .'&artist=' .$artist; //Prepare Post parameters



/* Configure Curl */

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);    

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  //Allow music api to send response

curl_setopt($ch, CURLOPT_POST, 1);            //Signifyd that we are doing a POST request

curl_setopt($ch, CURLOPT_POSTFIELDS, $post);

//curl_setopt($curl, CURLOPT_HTTPHEADER, $header); //Only if you need to send headers





/* Get Response */

$response = curl_exec($ch);



//** For purposes of this demo, we will manually assume the JSON response from the API:

$response = '{ album: Ten }'; //(Raw JSON returned by API)



echo $response; //Send response back to Ajax, assuming it was already returned in JSON. Else encode it.

Further reading on Ajax requests:
https://api.jquery.com/jquery.get/

https://api.jquery.com/jquery.post/