Включите CORS в учетной записи Azure Maps с Angular 7

Question

Я использую учетную запись Azure Maps с Angular 7 и пытаюсь создать ввод для автозаполнения.

Я звоню по URL:

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

Когда я запускаю эту ссылку в почтальоне,он работает отлично и отвечает с данными, которые я хочу.Но когда я звоню в Angular с помощью HttpClient, у меня возникает проблема с CORS.

Я не могу найти место, где можно изменить cors в сервисе.Кто-нибудь знает, как это исправить?

Кроме того, если кто-то скопировал этот URL и использовал его где-то еще, он воспользуется услугой, но за мою плату.Как я могу защитить его с определенными URL-адресами?

Answer 1

CORS (Cross-Origin Resource Sharing) - это способ для сервера сказать «Я приму ваш запрос, даже если вы пришли из другого источника».Это требует сотрудничества с сервера - поэтому, если вы не можете изменить сервер (например, если вы используете внешний API), этот подход не будет работать.

Измените сервер, добавив заголовок Access-Control-Allow-Origin: * для включения запросов на отправку из любого места (или указание домена вместо *).

В качестве альтернативы плагины работали с HTTP, но не с последним httpClient.Кроме того, настройка заголовков ответов CORS на сервере на самом деле была невозможной.Итак, я создал файл proxy.conf.json для работы в качестве прокси-сервера.

proxy.conf.json file:

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

Я поместил файл proxy.conf.json рядом с *Файл 1012 * в том же каталоге.

Затем я изменил команду запуска в файле 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

Вы можете прочитать больше здесь .

Надеюсь, это поможет.

Answer 2

В Azure Maps добавлена ​​политика CORS, которая менее ограничительна. Все заголовки ответа должны теперь содержать необходимые 'Access-Control-Allow-Origin': '*'. Также следил в этой теме здесь .