Question

我现在将Azure Maps Account与Angular 7结合使用，并尝试创建自动完成输入。

我正在呼叫网址：

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

当我在邮递员中运行此链接时，它可以正常运行，并且可以对所需数据进行响应。但是当我使用HttpClient在Angular中调用时，出现了CORS问题。

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

此外，如果有人复制了该URL并将其用于其他地方，则他将使用该服务，但费用由我承担。如何使用特定的Urls保护它？

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": "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

您可以阅读更多here。

希望有帮助。

Answer 2

Azure Maps现在添加了限制较少的CORS政策。现在，所有响应标头都应包含必要的'Access-Control-Allow-Origin': '*'。还对该线程here进行了跟踪。

Answer 3

Azure REST API使用CORS响应标头进行响应，但是使用'Access-Control-Allow-Origin': '*'作为响应标头。默认情况下，使用fetch调用API credentials: include时，浏览器在下面抱怨

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

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

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

其他选择是通过网关/服务层等代理此API。