Azure retail price api : https://prices.azure.com/api/retail/prices?$filter=serviceName eq 'SQL Database' and armRegionName eq 'centralus' and skuName eq '6 vCore'

Hi there, I am using azure retail price api in my angular project, whenever I call api it gave me CORS policy: No 'Access-Control-Allow-Origin' error, as you can see in the image. when I directly use this api in the chrome or postman, it works fine and gave me response.

when I disable the chrome cors and web-security, that api works in the angular app.

"chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

my problem is that, how can i use azure retail price api without disable chrome security in angular app.

CodePudding user response：

Since this is a chrome security setting that only users should be able to set on their own browser, you likely won't be able to bypass the setting via your app's code.

Whenever possible, you want the API to set their Access-Control-Allow-Origin header, but that's probably not an option here.

If you have your own backend, you can add a proxy endpoint to return the response from the Azure API. The HTTP client you use on your backend probably either doesn't care about the origin header or can be configured to ignore it. (Axios ignores it by default)

CodePudding user response：

IF you go to the azure portal where the API is hosted, and select the API. On the left side you will see a list of options. Under API or you could search 'CORS'. You can enable or disable CORS policy.

You can also allow origins, so if you wish to keep CORS enabled, you can put the front end credentials in there