Question 104828 in Azure Question posted in
The official documentation to get you started can be found here.

Azure Retail Price Api Not Working In Angular App

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

    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)

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search