Google Vision API 调用的 CORS 问题答案

【问题标题】：CORS Issues with Google Vision API CallsGoogle Vision API 调用的 CORS 问题
【发布时间】：2018-04-19 03:46:14
【问题描述】：

我正在使用 Ajax 调用 Google 的 Vision API。我已完成计费并收到 API 密钥。但是，一旦实施，我就会收到这样的错误：

“对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问“原点”。响应具有 HTTP 状态代码403。”

我尝试使用我在网上找到的解决方案，例如将请求标头设置为“Access-Control-Allow-Origin: *”并使用 Chrome 扩展程序。如果有人可以提供帮助，那就太好了。

var request = {     
    "requests": [{
              "image": {
                "content": url,
              },
              "features": [{
                  "type": "WEB_DETECTION",
                  "maxResults": 1
               }]
            }]
     }

$.ajax({
     method: 'POST',
     url: 'https://vision.googleapis.com/v1/images:annotate?key=' + key,
     contentType: 'application/json',
     data: JSON.stringify(request),
     processData: false,
     beforeSend: function(req) {
         req.setRequestHeader('Access-Control-Allow-Origin', '*');
         console.log(req);
     },
     success: function(data){
         console.log("Data: " + data);
         var webData = data.responses[0].webAnnotations[0];
         console.log("Web Data: " + webData);
     },
     error: function (data, textStatus, errorThrown) {
         console.log('error: ' + errorThrown);
     }
});

【问题讨论】：

为什么要在 request 中设置 response 标头？ setRequestHeader('Access-Control-Allow-Origin' 摆脱它。此外，有问题的 API 是否需要 JSON 内容类型？因为这两件事会触发预飞行
查看示例中的请求。 a) 请求的内容类型为text/plain，但请求参数为 JSON 字符串。 - 所以尝试contentType: 'text/plain, 并从请求中删除响应头
我删除了响应标头并更改了 contentType，因此不再有预检，但我收到此错误：“'Access-Control-Allow-Origin' 标头的值为 'null ' 不等于提供的来源。因此不允许访问来源 'null'。"
您是从本地文件file:/// 发出请求吗？
是的，但是文件被转换为Base64并存储在变量“url”中

标签： javascript google-cloud-platform google-cloud-vision

【解决方案1】：

我将在这里总结一下cmets中的讨论：

当使用file://协议打开网站文件进行跨域API调用时，API调用通常会被浏览器拒绝。要避免这种情况，请尝试运行本地服务器并从那里访问它。

我一般使用npm包http-server

npm i -g http-server
cd /path/to/folder/with/static/files
http-server

您的网站可以通过http://localhost:8080访问

编辑：您需要安装 NodeJS 才能使用 npm

如果你没有 NodeJS，你也可以安装 Apache 或 Nginx 或 XAMPP 来做同样的事情。

还有一个名为Surge.sh 的便捷服务，可让您轻松地将网站部署到surge.sh 上的自定义子域。

【讨论】：

I usually use the npm package - 也许你应该提到这需要node.js：p