通过Axios发布Azure Event Grid事件遇CORS错误如何配置？

结论 #

Azure Event Grid 原生不支持浏览器端直接发起跨域请求，无论怎么配置Axios都无法直接从前端调用成功，Axios不适用于该场景。

原因说明 #

• Event Grid服务端没有提供任何CORS相关的配置能力，不会返回Access-Control-Allow-Origin等跨域校验所需的响应头，所有浏览器端发起的跨域请求都会被CORS策略拦截，这和公网访问权限、请求参数正确性无关。
• Postman请求能成功是因为Postman不属于浏览器环境，不会主动执行CORS预检校验，只要认证信息、请求参数正确就能正常返回结果。
• 你当前的实现存在严重安全风险：直接将Event Grid访问密钥写在前端代码中，所有访问站点的用户都可以直接提取到密钥，随意向你的Topic推送事件，甚至滥用资源产生额外费用。

可行解决方案 #

你需要新增一层后端代理中转请求，推荐两种适配你当前技术栈的方案：

1. Netlify Functions方案（成本最低，适配你当前的Netlify部署环境）
   在你的Netlify项目中新增无服务函数，前端将事件数据发送给该函数，由函数在服务端调用Event Grid接口，再将结果返回给前端。该方案中你可以自行在Netlify函数中配置CORS规则，同时访问密钥可以保存在Netlify环境变量中，不会暴露给前端。
2. Azure Functions/其他后端服务中转
   逻辑与上述方案一致，由后端服务代替前端发起Event Grid调用，再将结果返回前端即可。

内容的提问来源于stack exchange，提问作者Steph Locke