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

Question

I am using now Azure Maps Account with Angular 7 and try to create an Autocomplete input.

I am calling the URL:

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

When I run this link in postman, it works perfectly and responses with the data that I want. But when I call in in Angular using HttpClient, I am getting a CORS problem.

I cannot find a place where to change the cors in the service. Does anybody know how to fix it?

Besides, if someone copied this URL and used it in somewhere else, he will use the service but on my cost. How can I secure it with specific Urls?

Answer 1

CORS (Cross-Origin Resource Sharing) is a way for the server to say "I will accept your request, even though you came from a different origin." This requires cooperation from the server – so if you can't modify the server (eg if you're using an external API), this approach won't work.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *).

Alternatively the plugins worked with HTTP but not with the latest httpClient. Also, configuring the CORS response headers on the server wasn't really an option. So, I created a proxy.conf.json file to act as a proxy server.

proxy.conf.json file:

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

I placed the proxy.conf.json file right next the the package.json file in the same directory.

Then I modified the start command in the package.json file:

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

The HTTP call from my app component:

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

Lastly to run my app, I'd have to use npm start or ng serve --proxy-config proxy.conf.json

You can read more here .

Hope it helps.

Answer 2

Azure Maps has now added CORS policy which is less restrictive. All response headers should now contain the necessary 'Access-Control-Allow-Origin': '*' . Also followed up on this thread here .

Answer 3

Azure REST APIs respond with CORS response headers, but uses 'Access-Control-Allow-Origin': '*' as response header. While using fetch to call API credentials: include is sent by default, browser complains about below

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

fetch API provides options to send credentials mode. Using this calling Azure API works

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

Other option would be to proxy to this API via gateways/service layer etc.