title: Hide referrer header in API request
body: <p>I need to make requests to Google Translate Text-To-Speech API. I have an enabled key but keep getting blocked by No Access-Control-Allow-Origin.</p>
  
  <p>I've posted more about it here:</p>
  
  <p><a href="https://stackoverflow.com/questions/30929518/google-translate-api-no-access-control-origin-with-text-to-speech">Google Translate API - No Access Control Origin with Text to Speech</a></p>
  
  <p>The following sources, <a href="http://weston.ruter.net/2009/12/12/google-tts/" rel="nofollow noreferrer">http://weston.ruter.net/2009/12/12/google-tts/</a> and <a href="https://stackoverflow.com/questions/12883330/request-to-google-text-to-speech-api">Request to Google Text-To-Speech API</a> say that </p>
  
  <blockquote>
    <p>Google returns a 404 error if the HTTP request contains a Referer
    header other than an empty string.</p>
  </blockquote>
  
  <p>Given a request like:</p>
  
  <pre><code>    $.get('https://translate.google.com/translate_tts?key='+myKey+'&amp;ie=utf-8&amp;tl=en&amp;q=Hello+world',
          function (returned_data) {
  </code></pre>
  
  <p>How do I hide or remove the referrer header so I'm not blocked?</p>
  
  <p><a href="https://href.li/" rel="nofollow noreferrer">this source</a> says to put <code>https://href.li/...</code> in front. So I changed it to: </p>
  
  <pre><code>$.get('https://href.li/?https://translate.google.com/translate_tts?key='+key+'&amp;ie=utf-8&amp;tl=zh-CN&amp;q=你好',
  </code></pre>
  
  <p>And am still blocked.</p>
  
  <hr>
  
  <p><strong>Server-Side attempt:</strong> No response.</p>
  
  <p><a href="http://www.konradkiss.com/2012/01/embedding-text-to-speech-into-html5_18.html" rel="nofollow noreferrer">This blog</a> provides a server-side script which sets the referrer to an empty string. He says:</p>
  
  <blockquote>
    <p>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. </p>
  </blockquote>
  
  <p><em>/php/testPHP.php:</em></p>
  
  <pre><code>$qs = http_build_query(array("ie" =&gt; "utf-8","tl" =&gt; $_GET["tl"], "q" =&gt; $_GET["q"]));
  $ctx = stream_context_create(array("http"=&gt;array("method"=&gt;"GET","header"=&gt;"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);
  </code></pre>
  
  <p><em>index.php (root):</em></p>
  
  <pre><code>&lt;audio controls="controls" autoplay="autoplay" style="display:none;"&gt;
              &lt;source src="/php/testPHP.php?translate_tts?tl=en&amp;q=the%20brown%20fox%20jumped%20over%20the%20lazy%20dog." type="audio/mpeg" /&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p><em>tail -f apache error logs:</em></p>
  
  <blockquote>
    <p>PHP Notice:  Undefined index: tl in /Users/myname/Sites/app/melonJS-dev/testPHP.php on line 4, referer: <a href="http://melon.localhost/" rel="nofollow noreferrer">http://melon.localhost/</a></p>
    
    <p>PHP Warning:  file_get_contents(<a href="https://translate.google.com/translate_tts?ie=utf-8&amp;q=the+brown+fox+jumped+over+the+lazy+dog" rel="nofollow noreferrer">https://translate.google.com/translate_tts?ie=utf-8&amp;q=the+brown+fox+jumped+over+the+lazy+dog</a>): 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: <a href="http://melon.localhost" rel="nofollow noreferrer">http://melon.localhost</a></p>
  </blockquote>
  
  <p><em>tail -f access log:</em> Shows the <code>tl</code> param getting passed in with a 200:</p>
  
  <blockquote>
    <p>GET
    /testPHP.php?translate_tts?tl=en&amp;q=the%20brown%20fox%20jumped%20over%20the%20lazy%20dog
    HTTP/1.1" 200 -</p>
  </blockquote>
  
  <hr>
  
  <p><strong>JSONP Attempt:</strong> so I thought perhaps wrapping the return object in a <code>&lt;script&gt;</code> would solve the issue. I get no response.</p>
  
  <pre><code>    $.ajax({
          url: 'https://translate.google.com/translate_tts?key='+key+'&amp;ie=utf-8&amp;tl=zh-CN&amp;q=你好',
              type: 'GET',
              dataType: 'jsonp',
              error: function(xhr, status, error) {
              alert("error");
          },
          success: function(json) {
              alert("success");
          }
          });
  </code></pre>
  
  <hr>
  
  <p><strong>HTML/JS text-to-speech attempt:</strong> 404 block</p>
  
  <p>js: </p>
  
  <pre><code>    &lt;script&gt;
          $(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?&amp;ie=utf-8&amp;tl=zh-CN&amp;q=' + text;
                  var url = 'https://translate.google.com/translate_tts?ie=UTF-8&amp;q=' + text + '&amp;tl=en';
                  $('audio').attr('src', url).get(0).play();
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;input type="text" name="text"&gt;
      &lt;a href="#" class="say"&gt;Say it&lt;/a&gt;
  
      &lt;audio src="" class="speech" hidden&gt;&lt;/audio&gt;
  </code></pre>
  
  <p>Following this tutorial: <a href="https://www.youtube.com/watch?v=DOtkNxmg9QY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=DOtkNxmg9QY</a></p>