使用纯 js 向 google api 发送 CORS POST 请求

Posted 2023-03-04

【中文标题】使用纯 js 向 google api 发送 CORS POST 请求

【英文标题】：CORS POST request to google api with pure js

【发布时间】：2015-09-25 00:12:04

【问题描述】：

我遇到了 google 语音 API 的 CORS 问题。 我需要发送音频文件（POST 请求）到

 https://www.google.com/speech-api/v2/recognize?xjerr=1&client=chromium&lang=en-US&maxresults=10&pfilter=0&xjerr=1&key=MY_KEY

我还应该指定一个标头 Content-Type:audio/l16; rate=44100 以帮助 Google Speech API 正确处理我的请求。

我通过 curl 尝试了这个请求并且它有效 - 我可以收到正确的结果。但是，当我尝试通过客户端 javascript 执行此操作时，脚本失败并出现错误

跨域请求被阻止：同源策略不允许读取位于https://www.google.com/speech-api/v2/recognize?xjerr=1&client=chromium&lang=en-US&maxresults=10&pfilter=0&xjerr=1&key=MY_KEYI&output=json 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

我了解到服务器不包含 Acces-Control-Allow-Origin 标头。

我的问题是如何使用纯 JavaScript 从我的主机向 Google API 执行 CORS POST 请求？

【问题讨论】：

也许你忘记了 .withCredentials 什么的？另请参阅：html5rocks.com/en/tutorials/cors

我使用这个教程来实现。我用Credentials=true 发送它

您在使用 Chrome 吗？也许这会有所帮助：***.com/questions/3136140/cors-not-working-on-chrome

我正在使用 Chrome 和 Firefox。它在两种浏览器中都不起作用。我的主要问题是我应该添加“自定义”标题（我的内容类型是音频）。我可以发送带有标题的 OPTIONS 请求：Access-Control-Request-Header: content-type 和 Access-Control-Request-Metod: POST。但是，Google 服务器响应不包含 CORS 标头。所以浏览器认为这是一个无效的请求。

考虑到 Google 没有语音 API 的文档，我不相信它是公开支持的。不建议您使用此界面，因为它可能随时更改或中断。

【参考方案1】：

我刚刚获得了我的 Javascript CORS 代码，可以向 Google 日历 API 发出 CORS 请求，以将电子邮件添加到日历中。跟随它并更换你需要的东西。我使用 oAuth2 进行身份验证，我在下面的代码之外执行此操作，因此“google_access_token”变量已经设置在下面函数之外的全局变量中：

解释：

*前两行源代码并加载 Google api （这将包括 XMLHttpRequest CORS） *new XMLHttpRequest() 创建 CORS 对象 *requestURL: 是 API 的 URL 端点，你应该用你自己的端点替换它

*params: 是你要传递的数据的 JS 对象，这又取决于你使用的 API

*JSON.stringify(params) 将JS数据对象转换为json字符串

*xhr.open('POST', requestURL + '?access_token=' + encodeURIComponent(google_access_token), true ) 初始化请求，注意到我在编码后如何附加 access_token

*xhr.setRequestHeader( 'Content-Type', 'application/json'): 设置http content-type指定我以json格式传递数据

*将响应处理程序添加到 onload 和 oneerror 事件

*xhr.send(paramsjasonString)，最后发送数据

这里是指向 Google Client API for Javascript 页面的链接，其中解释了 CORS 的工作原理。不幸的是，它的 POST 示例太简单了，所以我不得不花一些时间弄清楚如何发送更复杂的数据的细节。

 <script src="https://apis.google.com/js/api.js"></script>
      <script type="text/javascript">
       gapi.load('auth2', function() 
        // Library loaded.
      );

      function gapiACL() 
      var xhr = new XMLHttpRequest();
      var requestURL = 'https://www.googleapis.com/calendar/v3/calendars/[e-mail]/acl'; 
      var params = role: "writer",
                      scope: 
                        type: "user",
                        value: "[e-mail]"         
                      
                    ;


       var paramsjasonString = JSON.stringify(params); // convert the javascript object to a Json string
       console.log("paramsjasonString = " + paramsjasonString);

       xhr.open('POST', requestURL + '?access_token=' + encodeURIComponent(google_access_token), true );
       // Specify the http content-type as json
        xhr.setRequestHeader(
         'Content-Type', 'application/json');

       // Response handlers
       xhr.onload = function() 
         var responseText = xhr.responseText;
         console.log(responseText);
         // process the response.
       ;

      xhr.onerror = function() 
        console.log('There was an error!');
      ;
      xhr.send(paramsjasonString);