azure functions app: sudden CORS issue (for like no reason)

Question

getting the client origin error, after i had been hitting with a client from localhost for hours:

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

why would my azure function service suddenly change like this?

Answer 1

ok https://social.msdn.microsoft.com/Forums/en-US/ffb2067e-0846-450b-8665-0cd6199aad75/sudden-cors-client-error?forum=AzureFunctions#ffb2067e-0846-450b-8665-0cd6199aad75

Answer 2

Hi Aaron,

It looks like your question was answered on MSDN. posting here for visibility.

"To prevent malicious code execution on the client, modern browsers block requests from web applications to resources running in a separate domain. Cross-origin resource sharing (CORS) lets an Access-Control-Allow-Origin header declare which origins are allowed to call endpoints on your function app."

Refer - https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors

Please let us know if you have further questions.

Thanks,

Grace

Answer 3

Hi Grace,
I have similar issue with my react client reaching api in Azure functions. I have added the web application url to function app CORS policy to allow access, but I am still getting same issue.

Access to XMLHttpRequest at 'functtionappUrl from origin 'Website Url' 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.

Any advise please?

Answer 4

Hi,

Use the local.settings.json settings in your project. For the CORs settings to kick in, run the project in debug mode. Just running from the CLI may not work.

"Host": {
"LocalHttpPort": 7071,
"CORS": "*",
"CORSCredentials": false
}

Answer 5

Basically, using ajax with local resources doesn't work.

Chrome and Safari has a restriction on using ajax with local resources. This error means that you are trying to perform Ajax on a local file. This is forbidden for security reasons.

In order to solve this problem, you can use firefox or upload your data to a temporary server. If you still want to use Chrome, start it with the below option;

--allow-file-access-from-files

Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:

<script>
$.support.cors = true;
</script>