使用 Vue3 和 influxdb2 出现 CORS 错误答案

【问题标题】：Getting CORS error with Vue3 and influxdb2使用 Vue3 和 influxdb2 出现 CORS 错误
【发布时间】：2022-01-01 19:31:17
【问题描述】：

从 Vue 前端访问我的 influxdb2 时出现 CORS 错误。前端在开发模式下本地运行，influxdb 运行在网络中的服务器上。

我使用 apache 作为反向代理，但没有让它工作。

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "append,delete,entries,foreach,ge>

    ProxyPreserveHost on
    ProxyRequests on
    ProxyPass / http://192.168.1.60:8086/ Keepalive=On
    ProxyPassReverse / http://192.168.1.60:8086/

你有什么想法吗？这是我的js代码：

axios
.post("https://influx.domain/query",{ headers: {
  'Authorization': `Token ${token}`,
  'Content-Type': 'application/vnd.flux',
  },
  data: query
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
});

【问题讨论】：

标头设置 Access-Control-Allow-Origin "localhost:8080" 也不起作用
您的屏幕截图显示当前不允许使用 Authorization 标头，即使您使用 fetch 发送它也是如此；这可能就是 CORS 预检失败的原因。请改用Header set Access-Control-Allow-Headers: "Content-Type, Authorization"。
我尝试了您的建议，但没有奏效，...还有其他想法吗？我也尝试不使用本地主机，而是使用我的正常 IP 和端口
编辑您的问题并在浏览器的“控制台”选项卡中添加 CORS 错误消息。这将有助于我们诊断问题。

标签： apache cors vuejs3 influxdb-2

【解决方案1】：

我让它工作了，我必须将 always 添加到 Apache 配置中，见下文：

    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "Authorization, Content-Type"

【讨论】：