Question

我有一个在 localhost:8080 上运行的 web 应用程序的前端，以及一个在 localhost:8086 上运行 influxDB 的 docker 容器。我已经 npm 安装了 influxdb-client-js (https://github.com/influxdata/influxdb-client-js) 并使用我的凭据创建了一个名为 db.ts 的文件，其中包含此代码 (https://github.com/influxdata/influxdb-client-js/blob/master/examples/influxdb-1.8.ts)。

现在我只想测试我是否可以查询数据库，形成前端。当我将 db.ts 导入 vue 组件以查看浏览器控制台中是否会出现任何数据时，Cors 策略阻止了请求：

在 'http://localhost:8086/api/v2/query?org=' from origin 'http://localhost:8080' 的访问已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我尝试创建一个 vue.config.js 文件，并像这样进行代理：

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    // options...
    devServer: {
          proxy: 'http://localhost:8086',
          
      }
  }

这并没有解决问题。那么，我将如何在此处的“服务器端”启用 Cors？

Answer 1

在 InfluxDB 前面使用一些（您最喜欢的）反向代理并在那里添加所需的 CORS 标头。 nginx 的示例：https://enable-cors.org/server_nginx.html

我猜你在 InfluxDB 调用中会有凭据/授权，所以不要在你的设置中使用 Access-Control-Allow-Origin: *，因为 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

<块引用>

在带有凭证的请求中，它被视为没有特殊语义的文字头名称“*”。请注意，Authorization 标头不能使用通配符，并且始终需要明确列出。

从前端 (Vue 3) 到后端 (influxDB 1.8) 的 Cors 策略阻止请求

1 个答案: