Angular 7 调用 Azure Indexer 服务答案

【问题标题】：Angular 7 calling Azure Indexer serviceAngular 7 调用 Azure Indexer 服务
【发布时间】：2019-07-31 03:59:34
【问题描述】：

我正在尝试通过在 Angular 中创建的 Web 应用程序运行我在 Azure 中拥有的索引器。我找到了文档here。但是，每当我尝试根据此文档运行索引器时，都会被 CORS 阻止。这是在我的 service.ts 中调用索引器的代码

public async runIndex(){
        const httpHeaders = new HttpHeaders({
            'api-key': "api-key's value here",
            'Accept': 'application/json'
            'content-type': 'application/json'});

        let params = new URLSearchParams();
        params.set('api-version', this.apiVersion);

        await this.speechHttp.post(this.indexUrl, params, {headers: httpHeaders}).subscribe(
            error => this.errorMessage = <any>error
        );

这没有用，所以我做了更多的挖掘，在我阅读的文章中，我发现this one 指出需要从端口 443 进行 API 调用。所以我从 Angular 的默认端口 4200 更改为端口 443，但是那仍然行不通。我试过创建一个代理文件，然后运行ng serve --proxy-config proxy.conf.json，但这也没有用。有没有办法在 Angular 中解决这个问题？上次我创建的 API 出现 CORS 问题时，我不得不解决服务器/API 端的问题，但我无法访问 Azure Indexer 的 API。

这是 CORS 错误消息。

从源“http://localhost:443”对“https://my-indexer.search.windows.net/indexers/my-indexer/run?api-version=2019-05-06”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

看起来 API 正在阻止请求，即使请求的来源是建议的端口 443。

【问题讨论】：

标签： angular azure cors

【解决方案1】：

您 cannot access 来自浏览器的管理 API。这是为了保护管理员密钥，因为将它们嵌入前端应用程序会带来安全风险。您可以为索引本身设置自定义 CORS 定义，以允许通过浏览器访问它们，但此选项不适用于索引器。

如果您想从 Web 客户端（例如管理区域）启用索引器，您需要让 Angular 应用调用后端 API，并且该 API 可以调用 Azure 搜索。

【讨论】：

感谢我们最终解决了这个问题，现在可以使用了