通过 Axios 发布 Azure Event Grid 事件答案

【问题标题】：Publishing an Azure Event Grid event via Axios通过 Axios 发布 Azure Event Grid 事件
【发布时间】：2022-01-08 10:27:00
【问题描述】：

我们正在构建一个 Vue SPA 并使用 Axios 进行 API 调用。我们尝试扩展当前方法以将自定义事件发布到 Azure 事件网格，但出现以下错误：

从源“https://loving-chandrasekhar-bfd4c4”访问“https://egtester.uksouth-1.eventgrid.azure.net/api/events?api-version=2018-01-01”的 XMLHttpRequest .netlify.app' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我担心 Event Grid 的服务器端配置使其与基于浏览器的远程调用（例如通过 axios）不兼容。

我们创建了一个 MRE：

Github
Netlify Live demo
事件网格的 ARM 和 JS 是 Q 的底部

我们已经检查/验证的一些事情：

Docs on publishing custom events 概述请求的 URL 和所需的标头
代码在 localhost 或 netlify 上不起作用
我们已通过运行 Postman 查询确认端点正常
事件网格设置为无限制地允许来自公共 IP 的流量

有谁知道如何配置 axios 请求才能工作？ axios 是在这种情况下使用的合适的 JS 库吗？

{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "topics_egtester_name": {
            "defaultValue": "egtester",
            "type": "String"
        }
    },
    "variables": {},
    "resources": [
        {
            "type": "Microsoft.EventGrid/topics",
            "apiVersion": "2021-06-01-preview",
            "name": "[parameters('topics_egtester_name')]",
            "location": "uksouth",
            "sku": {
                "name": "Basic"
            },
            "kind": "Azure",
            "identity": {
                "type": "None"
            },
            "properties": {
                "inputSchema": "EventGridSchema",
                "publicNetworkAccess": "Enabled",
                "disableLocalAuth": false
            }
        }
    ]
}

const eventGridKey = "3SErw+mCGtyvTWcVsa1lqd4iJiFW2IsUNmothj75J1A=";
const apiEndpoint = "https://egtester.uksouth-1.eventgrid.azure.net/api";

const eventGridApi = axios.create({
  baseURL: apiEndpoint,
  params: {
    "api-version": "2018-01-01"
  },
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
      "aeg-sas-key": eventGridKey,
    },
});

function onSubmit() {
  let postData = {
    id: "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d",
    eventType: "recordInserted",
    subject: "egtester/submission",
    eventTime: "2021-11-29T16:18:38.532Z",
    data: {
      preferredName: "Nikhil",
      familyName: "Kanukuntla",
      accepted: true,
      message: "Test Message",
      email: "nikhil.kanukuntla@nhq.com",
    },
  };

  eventGridApi
    .post("/events", postData)
    .then((result) => {
      console.log(JSON.stringify(result));
    })
    .catch((err) => {
      console.log(err);
    });
}

【问题讨论】：

标签： javascript axios azure-eventgrid

【解决方案1】：

关于与 Azure 事件网格服务器的服务器端配置相关的问题，您是对的。不幸的是，没有办法改变这种行为。此外，通过这种方法，您会暴露被视为秘密的密钥。

另一种方法是设置一个简单的服务，该服务可以转发请求并使用正确的 CORS 标头进行响应。你可以在现有的后端添加一个端点，它可以做到这一点，或者利用Azure Functions / Logic Apps 之类的东西来做同样的事情。如果你已经在使用 Azure APIM，你也可以利用这个policy example。

【讨论】：