angular - 使用 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 保护它？

score 1 · Accepted Answer

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

希望能帮助到你。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

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

3 回答 3