使用 Angular 7 在 Azure Maps 帐户中启用 CORS

Question

我现在正在使用带有 Angular 7 的 Azure Maps 帐户并尝试创建一个自动完成输入。

我正在调用 URL：

this.http.get('https://atlas.microsoft.com/search/address/json?subscription-key=<key>&api-version=1.0&query=Newyork').subscribe(...)

当我在邮递员中运行此链接时，它可以完美运行并响应我想要的数据。 但是当我使用 HttpClient 在 Angular 中调用时，我遇到了 CORS 问题。

我找不到可以在服务中更改 cors 的地方。 有人知道如何解决吗？

此外，如果有人复制了这个 URL 并在其他地方使用了它，他将使用该服务，但需要支付我的费用。 如何使用特定的 URL 来保护它？

Answer 1

CORS（跨域资源共享）是服务器表示“即使您来自不同的来源，我也会接受您的请求”的一种方式。 这需要服务器的合作——因此如果您无法修改服务器（例如，如果您使用外部 API），则此方法将不起作用。

修改服务器以添加头 Access-Control-Allow-Origin: * 以启用来自任何地方的跨域请求（或指定域而不是 *）。

或者，这些插件适用于 HTTP，但不适用于最新的 httpClient。 此外，在服务器上配置 CORS 响应标头并不是一个真正的选择。 因此，我创建了一个 proxy.conf.json 文件来充当代理服务器。

proxy.conf.json文件：

"/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

我将proxy.conf.json文件放在同一目录中的package.json文件旁边。

然后我修改了package.json文件中的start命令：

"start": "ng serve --proxy-config proxy.conf.json"

来自我的应用程序组件的 HTTP 调用：

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

最后要运行我的应用程序，我必须使用npm start or ng serve --proxy-config proxy.conf.json

您可以在此处阅读更多内容。

希望能帮助到你。

Answer 2

Azure Maps 现在添加了限制较少的 CORS 策略。 所有响应头现在都应该包含必要的'Access-Control-Allow-Origin': '*' 。 还在这里跟进了这个线程。

Answer 3

Azure REST API 使用 CORS 响应标头进行响应，但使用'Access-Control-Allow-Origin': '*'作为响应标头。 使用fetch调用 API credentials: include默认发送credentials: include ，浏览器报错如下

当请求的凭据模式为“包含”时，响应中“Access-Control-Allow-Origin”标头的值不得为通配符“*”。

fetch API提供了发送credentials模式的选项。 使用此调用 Azure API 有效

fetch('https://example.com', {
  credentials: 'omit' // or 'same-origin'
})

其他选项是通过网关/服务层等代理到这个 API。