{"id":98589,"date":"2025-01-24T15:08:33","date_gmt":"2025-01-24T09:38:33","guid":{"rendered":"https:\/\/www.whizlabs.com\/blog\/?p=98589"},"modified":"2025-03-26T16:13:31","modified_gmt":"2025-03-26T10:43:31","slug":"enable-cors-for-azure-functions","status":"publish","type":"post","link":"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/","title":{"rendered":"How to Enable CORS for Azure Functions?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this blog, you will learn about the importance of ensuring resource sharing within the development environment to make it both efficient and effective. Most web browsers, unfortunately, implement the same-origin security policy that prevents web pages from calling APIs from different domains, hence the need for <strong>Cross-Origin Resource Sharing (CORS)<\/strong>.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CORS is an HTTP functionality that can be deployed to achieve this goal. It allows web applications running in different domains to access and share resources. While allowing for effective resource sharing, the technique also reduces the possibility of cross-site scripting attacks. Read through to read more about CORS and <\/span><a title=\"Azure Developer Associate certification\" href=\"https:\/\/www.whizlabs.com\/microsoft-azure-certification-az-204\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"><strong>Azure Developer Associate certification<\/strong><\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ea7e02;color:#ea7e02\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ea7e02;color:#ea7e02\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#The_CORS_Functional_Architecture\" >The CORS Functional Architecture<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Enabling_CORS_in_Microsoft_Azure\" >Enabling CORS in Microsoft Azure\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Enabling_CORS_using_Azure_Functions\" >Enabling CORS using Azure Functions.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Enabling_CORS_through_the_Azure_Portal_Primary_Method\" >Enabling CORS through the Azure Portal (Primary Method)\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Enabling_CORS_using_the_Azure_Command_Line_Interface_CLI_Alternative_Method\" >Enabling CORS using the Azure Command Line Interface (CLI) (Alternative Method)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Best_Practices_for_Using_CORS_on_Azure\" >Best Practices for Using CORS on Azure\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.whizlabs.com\/blog\/enable-cors-for-azure-functions\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The_CORS_Functional_Architecture\"><\/span><b>The CORS Functional Architecture<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The following architecture shows how CORS allows a server to say which origins are allowed to ask for resources. On the one hand, you have an SPfx webpart that lives on a SharePoint site &#8216;yourdomain.sharepoint.com&#8217;. On the opposite side you have an azure function that is resident in your Azure environment.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-98594 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture.webp\" alt=\"the cors functional architecture\" width=\"1536\" height=\"503\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture-300x98.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture-1024x335.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture-768x252.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/the-cors-functional-architecture-150x49.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">CORS controls cross-origin requests initiated by client-side web scripts. The challenge with havingthe same-origin policy is that it prevents web pages from making requests to different domains. . CORS lessons this restriction by allowing web servers to specify which domains are allowed to access their resources. This means that when a web application running in one domain (origin) makes a cross-origin request to a resource hosted on another domain, the browser sends a preflight request (OPTIONS) to the target domain to check if the actual request (e.g., GET, POST) is allowed. To indicate whether the cross-origin request is permitted or denied, the target server will respond with appropriate CORS headers.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Enabling_CORS_in_Microsoft_Azure\"><\/span><b>Enabling CORS in Microsoft Azure\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When you deploy your Azure function to Azure,\u00a0 you can configure the CORS settings of the functional app where the function is resident. However,\u00a0 as long as it is running locally, your app is restricted from accessing other apps. Once you set the CORS rules, then a properly authorized request made against the service evaluates from a different domain to determine whether it is allowed according to the rules you have specified. However, in this blog we will focus on the use of Azure Functions.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Enabling_CORS_using_Azure_Functions\"><\/span><b>Enabling CORS using Azure Functions.<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Azure Functions is a cloud-based compute service in Azure what is deployed to provide scalable serverless compute for Azure. The diagram below shows where Azure Function fits in the overall Azure cloud architecture;\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-98595 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture.webp\" alt=\"azure function azure cloud architecture\" width=\"1536\" height=\"818\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture-300x160.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture-1024x545.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture-768x409.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/azure-function-azure-cloud-architecture-150x80.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">As shown in the diagram above, Azure Functions is part of the API ecosystem consisting of a compute option where some piece of code (called a &#8220;function&#8221;) is invoked by a trigger. For instance, you can involve a function by making a HTTP request. It is crucial to register such domains in the allowed regions in the Azure Function to enable access by other domains. To enable CORS using the Azure Functions feature, you can use either the Azure Portal Method or the <a title=\"Azure CLI\" href=\"https:\/\/learn.microsoft.com\/en-us\/cli\/azure\/\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Azure CLI<\/strong><\/a>;<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Enabling_CORS_through_the_Azure_Portal_Primary_Method\"><\/span><b>Enabling CORS through the Azure Portal (Primary Method)\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The Azure portal is the primary method of enabling CORS using Azure Functions and includes the following steps;<\/span><\/p>\n<ul>\n<li><b>Log into the Azure Portal: <\/b><span style=\"font-weight: 400;\">The first step is for you to log on to the Azure Portal. To achieve this, go to the Azure Portal and log on using your Microsoft identification and authentication credentials. Sometimes, you may not have an existing and active Azure account yet. In this case you can create one for free at<\/span> <a href=\"https:\/\/portal.azure.com\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">https:\/\/portal.azure.com<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> and upgrade when necessary.<\/span><\/span><\/li>\n<li><b>Locate and access your Function App: <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Once you have successfully logged onto the portal, you can proceed to access your Function App through the search bar that is located at the top of the Azure portal. Simply type the name of your Function App and select it from the search results. For example, searching the cdc Function App revealed the following results.<\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-98597 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app.webp\" alt=\"locate and access your function app\" width=\"1536\" height=\"818\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app-300x160.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app-1024x545.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app-768x409.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/locate-and-access-your-function-app-150x80.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can also create a Function App if you do not have an existing one. In creating a Function App, you follow the following steps;\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Search the Function App<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">: From the search bar,\u00a0 type Function App and a create option will show as shown below;<\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-98598 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app.webp\" alt=\"search the function app\" width=\"1536\" height=\"575\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app-300x112.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app-1024x383.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app-768x288.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/search-the-function-app-150x56.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/li>\n<li aria-level=\"1\"><b>Create Function App<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">: When you click Create, the various options will come up followed by the following tab. You then proceed to populate it accordingly<\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-98599 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app.webp\" alt=\"create function app\" width=\"1536\" height=\"1256\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app-300x245.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app-1024x837.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app-768x628.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/create-function-app-150x123.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/li>\n<li><b>Navigate to the Function App. <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now that the Function App is available, the next stage is for you to enable the required configurations. Open Function App to reveal its various options. Several options will show up listed on the left-hand side of the page.<\/span><\/span><\/li>\n<li><b>Select &#8220;API&#8221;: <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In the menu on the left side of your Function App&#8217;s page, you will see several options. Scroll down to the &#8220;API&#8221; section and select &#8220;CORS.&#8221; This navigation will open a page with various settings and configurations for your Function App as depicted below;<\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-98600 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api.webp\" alt=\"select api\" width=\"1536\" height=\"831\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api-300x162.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api-1024x554.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api-768x416.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/select-api-150x81.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/li>\n<li aria-level=\"1\"><b>Configure CORS: <\/b><span style=\"font-weight: 400;\">Once you have selected the CORS option,<\/span> <span style=\"font-weight: 400;\">\u00a0you can now manage the origins that are allowed to access your Function App.<\/span><span style=\"font-weight: 400;\"> In the text box that appears, enter the domain URLs that you want to allow access to your function app. <\/span><span style=\"font-weight: 400;\">For instance, if you want to allow <\/span><a href=\"https:\/\/portalcdc.com\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">https:\/\/portalcdc.com<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">. If you wish to enter many domains, you can enter them separated by commas. You should ensure that you only add trusted origins to avoid security risks.<\/span><\/span><\/li>\n<li aria-level=\"1\"><b>Save Changes: <\/b><span style=\"font-weight: 400;\">After successfully adding the allowed origins, click the &#8220;Save&#8221; button at the top of the page to apply the changes. Your Function App is now able to accept requests from the specified origins.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Enabling_CORS_using_the_Azure_Command_Line_Interface_CLI_Alternative_Method\"><\/span><b>Enabling CORS using the Azure Command Line Interface (CLI) (Alternative Method)<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you prefer using the alternative method,\u00a0 you can enable CORS for your Function App using the Azure CLI. This method is recommended when you are skilled in coding\/programming. You can follow these steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Installation<\/b><span style=\"font-weight: 400;\">: Firstly, you should confirm and ensure you have the Azure CLI properly installed and configured. If you do not have the Azure CLI already installed, you can proceed to download from <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> and install.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Open Command-Line Interface (CLI)<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">: The CLI in Azure is varied and typically includes be Command Prompt, PowerShell, or any other terminal. On the top menu find the CLI icon (in this case as shown below just after the Copilot icon) and click. The CLI will appear as shown below;<\/span><\/span><\/span><img decoding=\"async\" class=\"alignnone wp-image-98601 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli.webp\" alt=\"open command line interface cli\" width=\"1536\" height=\"951\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli-300x186.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli-1024x634.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli-768x476.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/open-command-line-interface-cli-150x93.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Add Allowed Origins<\/b><span style=\"font-weight: 400;\">: Use the following command to add allowed a CORS rule to your Function App:<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">az function-app cors add &#8211;allowed-origins https:\/\/yourdomain.com &#8211;name YourFunctionAppName &#8211;resource-group YourResourceGroupName<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Please note that the above syntax is a general rule and will need you need to replace the <\/span><strong>https:\/\/yourdomain.com<\/strong><span style=\"font-weight: 400;\"> , YourFunctionAppName, and YourResourceGroupName with your actual domain name, function app name, and resource group name, respectively. An example is shown below using the \u2018cdc\u2019 domain name.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">az functionapp cors add &#8211;allowed-origins https:\/\/cdc.com &#8211;name cdc &#8211;resource-group cdc_group<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-98602 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins.webp\" alt=\"add allowed origins\" width=\"1536\" height=\"864\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins-300x169.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins-1024x576.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins-768x432.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/add-allowed-origins-150x84.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<p><b>Save Changes: <\/b><span style=\"font-weight: 400;\">Finally, you save the changes; you have successfully enabled CORS.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Best_Practices_for_Using_CORS_on_Azure\"><\/span><b>Best Practices for Using CORS on Azure\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You should implement and observe sound cloud security practices when using <a title=\"CORS\" href=\"https:\/\/learn.microsoft.com\/en-us\/rest\/api\/storageservices\/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services\" target=\"_blank\" rel=\"nofollow noopener\"><strong>CORS<\/strong><\/a> on Azure. The following are some of the best practices you should be aware of and adhere to then configuring CORS on Azure;\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-98604 size-full\" src=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure.webp\" alt=\"best practices for using cors on azure\" width=\"1536\" height=\"543\" srcset=\"https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure.webp 1536w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure-300x106.webp 300w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure-1024x362.webp 1024w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure-768x272.webp 768w, https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/best-practices-for-using-cors-on-azure-150x53.webp 150w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Allow specific allow origins<\/b><span style=\"font-weight: 400;\">: You should avoid allowing all origins (*) as this increases the risk of unauthorised access. Rather, specify the exact domains that require access to your resources.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Implement secure methods and headers<\/b><span style=\"font-weight: 400;\">: To reduce the attack surface, ensure that you allow only the necessary HTTP methods and headers required by your application. Limiting unnecessary methods and headers reduces the attack surface and minimizes the risks of attacks.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use HTTPS<\/b><span style=\"font-weight: 400;\">: Strong encryption is key throughout the process, and you should always use HTTPS to encrypt data during cross-origin communication. This assists in\u00a0 ensuring data privacy and security within your cloud environment.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Perform testing<\/b><span style=\"font-weight: 400;\">: Ensure that you properly and effectively evaluate and validate preflight requests and settings during and after the configuration process. This ensures they all your\u00a0 to ensure your CORS configuration settings are correct and functioning as required.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Perform error<\/b> <b>handling<\/b><span style=\"font-weight: 400;\">: Implement appropriate error handling for CORS-related issues so that you are able to correct errors before they affect your cloud environment. Also ensure that the error handling process provides you with meaningful error messages when cross-origin requests fail to assist in rectification<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Regularly review CORS settings<\/b><span style=\"font-weight: 400;\">: Monitoring is key in the CORS configuration process. You should periodically review your CORS settings to ensure that they align with your application\u2019s requirements as well as the security policies. Any deviations should be immediately addressed to maintain and enhance the security posture.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Enforce security<\/b><span style=\"font-weight: 400;\">: To enhance security, avoid using wildcard (`*`) in production environments as they can disturb live cloud operations. Best practice is to specify exact domains for tighter security.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Perform regular patches and updates<\/b><span style=\"font-weight: 400;\">: Do not forget to always patch and update your CORS settings on a regular basis as and when required. This is especially true and necessary in times of critical changes in the Azure cloud environment such as whenever you add a new client application that needs to access your Azure Function.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Get familiar with CORS as an <\/span><strong><a title=\"Azure Developer Associate- AZ 204\" href=\"https:\/\/www.whizlabs.com\/blog\/hands-on-labs-az-204-exam\/\" target=\"_blank\" rel=\"noopener\">Azure Developer Associate &#8211; AZ 204<\/a><\/strong><span style=\"font-weight: 400;\"> with Whizlabs cloud learning materials and ace your career with strong foundations.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><b>Conclusion<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Azure Function is a simple meths to add and configure CORS in Microsoft Azure amongst a variety of methods that can be implemented.. You have the option of using the\u00a0 Azure portal and the CLI to enable CORS in therefore providing flexibility to the user based on preferences and skills. It is also important to observe best practices during the configuration process to presence incidences of errors and bugs.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, you will learn about the importance of ensuring resource sharing within the development environment to make it both efficient and effective. Most web browsers, unfortunately, implement the same-origin security policy that prevents web pages from calling APIs from different domains, hence the need for Cross-Origin Resource Sharing (CORS).\u00a0 CORS is an HTTP functionality that can be deployed to achieve this goal. It allows web applications running in different domains to access and share resources. While allowing for effective resource sharing, the technique also reduces the possibility of cross-site scripting attacks. Read through to read more about CORS [&hellip;]<\/p>\n","protected":false},"author":436,"featured_media":98590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[349,5249,5250],"class_list":["post-98589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-azure","tag-azure","tag-azure-functions","tag-cross-origin-resource-sharing"],"uagb_featured_image_src":{"full":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions.webp",1536,864,false],"thumbnail":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-150x150.webp",150,150,true],"medium":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-300x169.webp",300,169,true],"medium_large":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-768x432.webp",768,432,true],"large":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions.webp",1536,864,false],"2048x2048":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions.webp",1536,864,false],"profile_24":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-24x24.webp",24,24,true],"profile_48":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-48x48.webp",48,48,true],"profile_96":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-96x96.webp",96,96,true],"profile_150":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-150x150.webp",150,150,true],"profile_300":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-300x300.webp",300,300,true],"tptn_thumbnail":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-250x250.webp",250,250,true],"web-stories-poster-portrait":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-640x853.webp",640,853,true],"web-stories-publisher-logo":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-96x96.webp",96,96,true],"web-stories-thumbnail":["https:\/\/www.whizlabs.com\/blog\/wp-content\/uploads\/2025\/01\/how-to-enable-cors-for-azure-functions-150x84.webp",150,84,true]},"uagb_author_info":{"display_name":"Swetha Selvakumar","author_link":"https:\/\/www.whizlabs.com\/blog\/author\/swetha-selvakumar\/"},"uagb_comment_info":5,"uagb_excerpt":"In this blog, you will learn about the importance of ensuring resource sharing within the development environment to make it both efficient and effective. Most web browsers, unfortunately, implement the same-origin security policy that prevents web pages from calling APIs from different domains, hence the need for Cross-Origin Resource Sharing (CORS).\u00a0 CORS is an HTTP&hellip;","_links":{"self":[{"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/posts\/98589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/users\/436"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/comments?post=98589"}],"version-history":[{"count":14,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/posts\/98589\/revisions"}],"predecessor-version":[{"id":98990,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/posts\/98589\/revisions\/98990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/media\/98590"}],"wp:attachment":[{"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/media?parent=98589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/categories?post=98589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.whizlabs.com\/blog\/wp-json\/wp\/v2\/tags?post=98589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}