从前端（Vue 3）到后端（influxDB 1.8）的 Cors 策略阻止请求答案

【问题标题】：Cors policy blocking request from frontend (Vue 3) to backend (influxDB 1.8)从前端（Vue 3）到后端（influxDB 1.8）的 Cors 策略阻止请求
【发布时间】：2021-09-10 01:34:40
【问题描述】：

我有一个在 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 策略正在阻止请求：

cors 策略已阻止从源“http://localhost:8080”获取“http://localhost:8086/api/v2/query?org=”的访问权限：响应预检请求未通过访问控制检查：请求的资源上不存在“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？

【问题讨论】：

标签： cors localhost influxdb vuejs3

【解决方案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 标头不能使用通配符，并且始终需要明确列出。

【讨论】：