从 Vue 客户端调用 Google Vision API

Question

我正在按照Google文档使用Vision API，但不幸的是，我继续收到以下CORS错误：

Access to XMLHttpRequest at 'https://vision.googleapis.com/v1/images:annotate?key=MY_KEY_HERE' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在做的是在 Vue 模板中

：

    const googleRequestData = {
      requests: [
        {
          image: {
            content: base64Image
          },
          features: [
            {
              type: 'LABEL_DETECTION',
              maxResults: 10
            },
            {
              type: 'SAFE_SEARCH_DETECTION'
            }
          ]
        }
      ]
    }
    const gv = await this.$axios.$post(
      `https://vision.googleapis.com/v1/images:annotate?key=${
        process.env.googleApplicationCredentials
      }`,
      googleRequestData
    )
    console.log('google vision', gv)

它看起来很简单，但我很确定我错过了一些像往常一样没有很好地记录的东西，我无法继续......

希望您能有所帮助！谢谢

Answer 1

1. 您可以查看有关允许域的 Google Cloud 文档，以便您可以向 Vision API 发出跨源请求

2. 其次，你可以从服务器(例如node.js(发出请求，并通过该服务器为你的Vue.js应用程序提供服务，在该服务器中，你可以向Vision API发出请求，以便你可以将该API与Vue一起使用.js这样它就不会被CORS阻止。你可以看看你可以用什么后端和 Vue.js