使用 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。