We've added a REST API in our Azure API management. However, when trying to access it from our frontend (Vue.js using axios), the requests fail and we get an error saying "Access to XMLHttpRequest at 'https://test-vue-backend.io/' from origin 'https://test-vue-frontend.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." on both GET requests and POST requests.
For the POST request, I can see a Preflight request being made.
This request gets a 200 Status code as a response, but the response body is empty.
The error message for the preflight request is "Access to XMLHttpRequest at 'https://test-vue-backend.io/' from origin 'https://test-vue-frontend.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
I don't see a preflight request for the GET request. It just fails immediately with the firstly mentioned error message.
This is what the policy looks like on the top level of that API (all operations):
<policies>
<inbound>
<base />
<cors>
<allowed-origins>
<origin>https://test-vue-frontend.io</origin>
</allowed-origins>
<allowed-methods preflight-result-max-age="300">
<method>GET</method>
<method>POST</method>
<method>PATCH</method>
<method>DELETE</method>
<method>OPTIONS</method>
</allowed-methods>
<allowed-headers>
<header>*</header>
</allowed-headers>
</cors>
<choose>
<when condition="@(context.Request.OriginalUrl.Host.ToLower() == "test-vue-backend.io")">
<set-backend-service base-url="http://localhost:8080/backend/webapi" />
</when>
<when condition="@(context.Request.OriginalUrl.Host.ToLower() == "dev-vue-backend.io")">
<set-backend-service base-url="http://localhost:8081/backend/webapi" />
</when>
</choose>
</inbound>
<backend>
<base />
</backend>
<outbound>
<base />
<set-header name="Access-Control-Allow-Origin" exists-action="override">
<value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
</set-header>
<set-header name="Access-Control-Allow-Credentials" exists-action="override">
<value>true</value>
</set-header>
<set-header name="Access-Control-Allow-Methods" exists-action="override">
<value>GET, POST, PATCH, DELETE, OPTIONS</value>
</set-header>
</outbound>
<on-error>
<base />
</on-error>
</policies>
All API names have been altered for privacy reasons, but I can assure you they are correct in my configuration and are not the cause of the issue.
The axios POST and GET requests look like this:
axios
.get("https://test-vue-backend.io/getroute?lang=" + lang)
.then(response => {
commit("SET_ADVICEDATA", response.data);
});
axios
.post("https://test-vue-backend.io/postuser", null, {
headers: { Authorization: "Bearer " + token }
})
.then(response => {
commit("SET_USERINFO", response.data);
});
If I type https://test-vue-backend.io/getroute?lang=nl directly into the browser, it works.
I have checked both REST API service when called from azure APIM returning empty response body with Status code 200 and Azure API Management returning 200 status without response body but both of these seem unrelated to my issue as the forward-request policy is enabled on my top level (all apis) and as I don't have a policy.
Edit:
Thanks to the comments below I have found that if I remove the </base> from my inbound and outbound sections, the CORS works.
I don't, however, understand what the cause is in the base.
The clause for ALL APIs looks like this:
<policies>
<inbound>
<cors allow-credentials="true">
<allowed-origins>
<origin>https://other-host-than-the-one-i-need.net</origin>
</allowed-origins>
<allowed-methods preflight-result-max-age="300">
<method>*</method>
</allowed-methods>
<allowed-headers>
<header>*</header>
</allowed-headers>
<expose-headers>
<header>*</header>
</expose-headers>
</cors>
</inbound>
<backend>
<forward-request />
</backend>
<outbound />
<on-error />
</policies>
My best guess would be that it was only allowing the base origin even though the </base> tag was mentioned before my origin, but I am not certain.
