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

Question

我在 localhost:8080 上有一个 web-app 运行的前端，在 localhost:8086 上有一个 docker 容器运行和一个 influxDB。我有 npm-installed influxdb-client-js (https://github.com/influxdata/influxdb-client-js) and created a file called db.ts containing this code (https://github.com/influxdata/influxdb-client-js/blob/master/examples/influxdb-1.8.ts) 和我的凭据。

现在我只想测试我是否可以从前端查询数据库。当我将 db.ts 导入 vue-component 以查看是否有任何数据会出现在 browser-console 中时，Cors 策略阻止了请求：

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

我尝试创建一个 vue.config.js-file，并像这样代理：

// vue.config.js

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

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

Answer 1

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

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

In requests with credentials, it is treated as the literal header name "*" without special semantics. Note that the Authorization header can't be wildcarded and always needs to be listed explicitly.

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

Cors policy blocking request from frontend (Vue 3) to backend (influxDB 1.8)

cors

localhost

influxdb

vuejs3