javascript - Google Vision API 调用的 CORS 问题

Question

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

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

我曾尝试使用我在网上找到的解决方案，例如将请求 header 设置为“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);
     }
}); 

Answer 1

我将在这里的评论中总结讨论:

如果使用 file:// 协议(protocol)打开网站文件，跨域调用 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 上的自定义子域。