javascript - 在 API 请求中隐藏引荐来源网址 header

Question

我需要向 Google Translate Text-To-Speech API 发出请求。我有一个已启用的 key ，但一直被“No Access-Control-Allow-Origin”阻止。

我在这里发布了更多相关内容:

Google Translate API - No Access Control Origin with Text to Speech

以下来源，http://weston.ruter.net/2009/12/12/google-tts/和 Request to Google Text-To-Speech API这么说

Google returns a 404 error if the HTTP request contains a Referer header other than an empty string.

给出如下请求:

    $.get('https://translate.google.com/translate_tts?key='+myKey+'&ie=utf-8&tl=en&q=Hello+world',
        function (returned_data) {

如何隐藏或删除引用 header ，以免被阻止？

this source说要放https://href.li/...在前。所以我把它改为:

$.get('https://href.li/?https://translate.google.com/translate_tts?key='+key+'&ie=utf-8&tl=zh-CN&q=你好',

我仍然被阻止。

---

服务器端尝试:没有响应。

This blog提供一个服务器端脚本，将引用者设置为空字符串。他说:

This gets the information from that access point and spits it out right away. But before it requests the data using file_get_contents, the Referer header is set to an empty string.

/php/testPHP.php:

$qs = http_build_query(array("ie" => "utf-8","tl" => $_GET["tl"], "q" => $_GET["q"]));
$ctx = stream_context_create(array("http"=>array("method"=>"GET","header"=>"Referer: \r\n")));
$soundfile = file_get_contents("http://translate.google.com/translate_tts?".$qs, false, $ctx);

header("Content-type: audio/mpeg");
header("Content-Transfer-Encoding: binary");
header('Pragma: no-cache');
header('Expires: 0');

echo($soundfile);

index.php(根):

<audio controls="controls" autoplay="autoplay" style="display:none;">
            <source src="/php/testPHP.php?translate_tts?tl=en&q=the%20brown%20fox%20jumped%20over%20the%20lazy%20dog." type="audio/mpeg" />
</audio>

tail -f apache 错误日志:

PHP Notice: Undefined index: tl in /Users/myname/Sites/app/melonJS-dev/testPHP.php on line 4, referer: http://melon.localhost/

PHP Warning: file_get_contents(https://translate.google.com/translate_tts?ie=utf-8&q=the+brown+fox+jumped+over+the+lazy+dog): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found\r\n in /Users/myname/Sites/app/melonJS-dev/testPHP.php on line 6, referer: http://melon.localhost

tail -f 访问日志: 显示 tl参数以 200 传入:

GET /testPHP.php?translate_tts?tl=en&q=the%20brown%20fox%20jumped%20over%20the%20lazy%20dog HTTP/1.1" 200 -

---

JSONP 尝试: 所以我想也许将返回对象包装在 <script> 中会解决这个问题。我没有得到任何回应。

    $.ajax({
        url: 'https://translate.google.com/translate_tts?key='+key+'&ie=utf-8&tl=zh-CN&q=你好',
            type: 'GET',
            dataType: 'jsonp',
            error: function(xhr, status, error) {
            alert("error");
        },
        success: function(json) {
            alert("success");
        }
        });

---

HTML/JS 文本转语音尝试: 404 block

js:

    <script>
        $(function() {
            $('a.say').on('click', function(e) {
                e.preventDefault();
                var text = $('input[name="text"]').val();
                text = encodeURIComponent(text);
                console.log(text);
                //var url = 'https://translate.google.com/translate_tts?&ie=utf-8&tl=zh-CN&q=' + text;
                var url = 'https://translate.google.com/translate_tts?ie=UTF-8&q=' + text + '&tl=en';
                $('audio').attr('src', url).get(0).play();
            });
        });
    </script>

html:

    <input type="text" name="text">
    <a href="#" class="say">Say it</a>

    <audio src="" class="speech" hidden></audio>

按照本教程操作:https://www.youtube.com/watch?v=DOtkNxmg9QY

Answer 1

PHP 脚本失败的原因:

如果您查看 PHP 的错误响应:

PHP Warning: file_get_contents(https://translate.google.com/translate_tts?ie=utf-8&q=the+brown+fox+jumped+over+the+lazy+dog)

您会注意到 file_get_contents 请求的 URL 不包含 tl 参数。这会导致返回 404。您可以直接在浏览器中访问该页面:

https://translate.google.com/translate_tts?ie=utf-8&q=the+brown+fox+jumped+over+the+lazy+dog

以上返回 404 响应:(

https://translate.google.com/translate_tts?ie=utf-8&q=the+brown+fox+jumped+over+the+lazy+dog&tl=en

但是在我们添加一个漂亮的新 Shiny tl=en 参数后，它就可以工作了:)。