Vue中用Axios调用Grafana API创建组织遇CORS及401错误求解决

从你的请求和响应信息来看，表面是CORS错误，但实际根源是OPTIONS预检请求返回了401 Unauthorized——浏览器发送的OPTIONS预检请求不会携带认证信息，而Grafana默认对所有API请求（包括OPTIONS）要求身份验证，导致预检不通过，最终触发CORS报错。

以下是具体解决思路：

1. 让Grafana允许OPTIONS请求匿名访问 #

修改Grafana的grafana.ini配置，添加对OPTIONS请求的放行规则：

[security]
# 允许匿名访问OPTIONS请求
allow_anonymous_options = true

同时确保你已有的CORS配置正确，修改后重启Grafana服务。这个配置会让Grafana对OPTIONS预检请求跳过认证，直接返回200和正确的CORS头，让浏览器继续发送实际的POST请求。

2. 用Vue项目的代理绕过跨域（推荐方案） #

避免直接在浏览器端发起跨域请求，通过Vite的代理功能将请求转发到Grafana：

• 在vite.config.js中添加代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/grafana-proxy': {
        target: 'http://localhost:8001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/grafana-proxy/, '')
      }
    }
  }
})

• 调整Axios的请求地址：

axios.post('/grafana-proxy/api/orgs', data, customOptions)

这种方式下，浏览器请求的是同域名的代理地址，不存在跨域问题，Vite会帮你把请求转发到Grafana服务器。

3. 验证Grafana账号权限与认证信息 #

确认你的VITE_GRAFANA_API_USER和VITE_GRAFANA_API_PASSWORD对应的账号：

• 拥有创建组织的权限（必须是Grafana管理员账号）
• 账号密码正确，可通过直接调用API测试（比如用Postman发送POST请求到http://localhost:8001/api/orgs，携带基本认证）

4. 调整Axios认证头的传递方式 #

尝试将基本认证信息直接放在请求头中，替代auth字段：

const customOptions = {
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Basic ${btoa(`${import.meta.env.VITE_GRAFANA_API_USER}:${import.meta.env.VITE_GRAFANA_API_PASSWORD}`)}`
  },
  withCredentials: true
}

注意：这个方法仍需先解决OPTIONS预检的401问题，否则实际请求还是无法发送。

内容的提问来源于stack exchange，提问作者Alberto Sanmartin Martinez