JavaScript/jQuery 对第三方网站的引用在本地工作，而不是在 Godaddy 运行网站上托管时（404 错误）答案

【问题标题】：JavaScript/jQuery reference to a third party website works locally, not when hosted on godaddy run site (404 error)JavaScript/jQuery 对第三方网站的引用在本地工作，而不是在 Godaddy 运行网站上托管时（404 错误）
【发布时间】：2015-03-08 09:23:25
【问题描述】：

我正在着手开发一个涉及文本转语音的网络应用程序。使用从 youtube 用户 Wes Bos 那里学到的技术，每次单击按钮时，我的代码都会通过 Google 的英文文本转语音 API（字面意思是将其粘贴到 URL 并返回音频）传递一个随机数。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>SujiQ Dev.0</title>
       
 
   </head>
   
<body>

   <!--text display/button -->

        <p>generate random number</p>
  <div id="output1"></div>
  <button id="btn1" onclick="outText()">Random number</button>
 
 <!--Hidden audio player -->

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

<!--jQuery lib-->
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
<!--read number out loud each button click -->

       <script> 

/*displays random number-of-the-moment; called on button click */

  function outText() {
  

  var randNum = Math.round(Math.exp(Math.random()*Math.log(10000000-0+1))); /*that's more like it*/

  document.getElementById("output1").innerHTML = randNum;

/* play audio of random number */

  $(function(){
        $("button#btn1").on("click",function(e){
          e.preventDefault();
          
          
          var url = "https://translate.google.com/translate_tts?ie=UTF-8&q=" + randNum + "&tl=en";

          $(".speech").attr("src", url).get(0).play();
 
 
        });
       });

  }
     
 
       </script>

 </body>
 
</html>

当在我的浏览器上本地运行时，此代码可以流畅地执行，但在我的 godaddy 提供的网站上托管完全相同的代码时，随机数生成器可以工作，但访问谷歌的语音 API 几乎总是失败，同时返回一个网络控制台错误行：“GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404（未找到）”。有趣的是，一旦在非常蓝的月亮上，它会通过并大声读出数字。

什么给了？我环顾四周，但我很困惑。

[[编辑]] 当作为 Stack Overflow sn-p 运行时，代码也无法大声读出数字

【问题讨论】：

我可以对 GoDaddy 的质量或缺乏质量发表评论。尝试使用其他主机作为测试。
关于您的编辑：您的代码作为 StackOverflow sn-p 对我来说运行良好。大声朗读。
我在同一页面中看到了 https 和 http URL 的混合。这有时会导致问题。
谷歌翻译 API 不需要 API 密钥吗？
@AlexanderO'Mara 感谢您提出这个问题。也许一旦托管代码，除非网站已注册，否则谷歌会拒绝任何呼叫？我仍然觉得代码在本地工作很奇怪。嗯

标签： javascript jquery http-status-code-404 google-text-to-speech

【解决方案1】：

这是一个付费 API。您需要在Google developer console 上设置您的项目，然后您必须输入您的 CC 计费信息。完成后，打开 API 选项卡下的 API。

然后转到“凭据”。在右侧，单击“编辑设置”，在提供的框中，将 URL 添加到您将托管文件的域，如“http://mywebsite.com”。不要将完整地址放入文件中，例如“http://mywebsite.com/mypage.html”。保存您的更改。

至于为什么您的文件在本地运行时有效，以下是我的测试文件的地址：

本地文件，在mac上运行

file:///Volumes/Macintosh%20HD/Users/DoDSoftware/Desktop/soundTest.html

本地文件，在 PC 上运行

file:///C:/Users/Flights%20Trainer/Desktop/soundTest.html

托管文件

http://affordable-glass.com/test/soundTest.html

你看到本地文件前面的file:///了吗？我猜谷歌设置了 API 以允许所有来自 file:/// 的来源，因为他们知道这些将是本地文件而不是托管文件。这样，开发人员可以在与他们签订付款计划之前测试 api 并创建他们的应用程序。但是，他们当然会阻止来自托管站点的任何请求，这些请求不在他们的付费计划中。

【讨论】：

感谢您的建议。我尝试在 Google 开发者控制台上创建一个新项目（我以前没有使用过）。看起来这是一项付费服务？我从您的回复和另一条评论中收集到的是，通常需要为使用 Google API 付费。如果这是真的，你知道为什么它在本地运行时工作吗？是不是只在托管时才需要付费？
当您说“在本地运行”时，您是指从您的实际 html 文件中还是当您将该 url 粘贴到浏览器中时？
本地作为将 html 文件从我的磁盘拖到浏览器中
知道了，我刚刚测试过，这里也是，看看我上面的编辑
出色的答案 - 感谢您让它如此易于理解！在承诺付款之前，我将继续“在本地”进行测试 - 很高兴知道这只是一个凭据问题。