javascript - 使用 PHP 和 Javascript/Ajax 绕过 CORS

标签 javascript php jquery ajax post

几个小时以来,我一直在努力解决这个问题,尽管我在 Web 开发方面没有受过多少教育,无法理解。情况如下:

另一个网站有一个脚本,他们通过以下方式获取信息:

    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);

我曾尝试做同样的事情,但当我尝试这样做时,我遇到了跨域错误。我知道他们是用 jsonp 和其他东西来做到这一点的方法,尽管我完全不知道从哪里开始。

当我尝试直接从他们的页面请求信息时,numbers.php 页面,例如 example.com/numbers.php?scoreid=131&num=41 。我总是返回“错误:不正确的参数语法”。

任何人都可以告诉我如何解决我的情况吗?我只知道 PHP 和 Javascript,我对 Ajax 和其他东西或外部库一无所知。

我感谢所有帮助! 注意:我无权访问网络服务器。

最佳答案

如果您无权访问您的服务器配置,并且您不控制外部 php 脚本(假设它没有设置为用作反向代理),那么您绝对不能使用独立 javascript 解决方案。

相反,您必须从您自己的本地 php 脚本发出外部请求。然后您将从 Ajax 调用您的本地 php 脚本,这工作,因为您正在访问本地文件,因此不会违反 CORS。

这是一个通过本地 PHP 脚本调用 Ajax 的示例。

想象一下您允许用户查找相册名称的场景。用户输入歌曲名称和艺术家。您向第三方 api 发出请求,并通过 JavaScript 警报通知将响应返回给用户。对于此示例,假设用户输入“Black”和“Pearl Jam”作为歌曲和艺术家名称

使用 HTML 示例将 Ajax POST 发送到本地 PHP 脚本:

<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 获取

<?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(使用 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.

进一步阅读 Ajax 请求:
https://api.jquery.com/jquery.get/
https://api.jquery.com/jquery.post/

关于javascript - 使用 PHP 和 Javascript/Ajax 绕过 CORS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29837162/

相关文章:

javascript - Jquery 脚本以计数脚本中的所有 div 为目标,希望它为每个 div 单独工作

javascript - 未捕获的类型错误 : Cannot read property 'textContent' of undefined

php - 使用 PHP 从密码获取经纬度

php - 以编程方式跳过默认 CCK 表单验证

javascript - JsTree如何在刷新时load_all节点

javascript - 将数字添加到数组元素

c# - 如何在jquery中计算文件上传进度?

php - Laravel 一条语句中的多个迁移表

javascript - 失败后如何重新尝试加载视频

javascript - 使用 soundmanager v2 预加载声音