JavaScript/jQuery 对第三方网站的引用在本地有效，而不是在 godaddy 运行网站上托管时（404 错误）

Question

我正在开始开发一个涉及文本到语音的网络应用程序。使用从 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 提供的网站上托管完全相同的代码时，随机数生成器可以工作，但可以访问 google's speech API 几乎总是失败，返回网络控制台错误："GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404 (Not Found)"。有趣的是，在一个非常蓝的月亮中，它会通过并大声读出数字。

什么给了？我环顾四周，但我被难住了。

[[编辑]] 当运行作为 Stack Overflow 片段

时，代码也无法大声读出数字

Answer 1

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

然后前往"Credentials"。在右侧，单击 "Edit Settings"，在提供的框中，将 url 添加到将托管文件的域，如“http://mywebsite.com". Dont put the full address to the file like "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:///了吗？我猜 Google 设置了 API 以允许来自 file:/// 的所有来源，因为他们知道这些将是本地文件而不是托管文件。这样，开发人员可以在与他们签订付款计划之前测试 api 并创建他们的应用程序。但是他们当然会阻止任何来自托管站点的请求，这些站点不在他们的付费程序中。

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

http-status-code-404

google-text-to-speech

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

http-status-code-404

google-text-to-speech

JavaScript/jQuery 对第三方网站的引用在本地有效，而不是在 godaddy 运行网站上托管时（404 错误）