As Azure CDN currently doesn’t support Vary: Origin header, enabling CORS on CDN with App Service can be tricky. There are two ways to do this.
If CORS is configured here, only when the request contains CORS headers, like
Origin: https://xxx.mydomain.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,content-type
the response will contain CORS headers, like
Access-Control-Allow-Origin: https://www.mydomain.com
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET,HEAD,OPTIONS
Access-Control-Expose-Headers: *
In other words, if the request doesn’t have CORS headers, the response won’t have CORS headers either.
If you set CORS in this way, you need to make sure the URLs that need CORS are never visited with non-CORS request, so that CDN can cache the correct response with CORS. Otherwise, CDN may cache the non-CORS reponse and following CORS requests will fail.
If configured in Web.config, App Service's response will contain CORS headers consistently regardless of whether the request has CORS headers.
In order to do this, you can update web.config to add CORS related headers.
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://www.mydomain.com" />
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,HEAD,OPTIONS" />
<add name="Access-Control-Expose-Headers" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Finnally, don't forget to purge CDN to make sure the response headers are reloaded.
curl -X OPTIONS "https://cdn.mydomain.com" -H "Origin: www.mydomain.com" -H "Access-Control-Request-Method: GET" -H "Access-Control-Request-Headers: authorization,content-type" -D - -s -o nul
Sample response
HTTP/2 200
access-control-allow-credentials: true
access-control-allow-headers: authorization,content-type
access-control-allow-methods: GET
access-control-allow-origin: www.mydomain.com
...