CORS Issues Between Azure Static Web Apps and Azure Databricks

Question

Hi,

I'm currently facing some CORS issues in my application setup and would like to know your opinion on how to solve them.

Front-end: Angular application deployed on Azure Static Web Apps (.azurestaticapps.net)

Endpoint to access: Model serving endpoints running on Azure Databricks (.azuredatabricks.net)

When the Angular app tries to make API calls to the endpoints hosted on Azure Databricks, the browser blocks these requests due to cross-origin restrictions, as expected.

However I don't see any way to configure the CORS on the azure databricks service or on the serving endpoints used in the application.

Questions:

1. What is the best way to configure CORS for Azure Databricks to allow requests from Azure Static Web Apps?
2. Are there any recommended practices or configurations that I might be missing?

Thank you in advance for your help!

Answer 1

I am not expert on Azure Static Web Apps, but here is what I found after some researches :

What is the best way to configure CORS for Azure Databricks to allow requests from Azure Static Web Apps?

Configuring CORS for Azure Databricks can be challenging because Databricks does not provide direct settings to manage CORS on its endpoints. However, you can work around this limitation by using Azure API Management or Azure Functions as a proxy to handle CORS headers.

You should set up an APIM instance as an intermediary between your Angular application and Databricks since it allows you to configure CORS policies easily :

• Create an API in APIM that points to your Databricks endpoints.
• Configure the CORS policy in the APIM instance to allow requests from your Angular application's domain (.azurestaticapps.net).
• Use the APIM endpoints in your Angular application instead of directly calling Databricks.

You can implement an Azure Function as a proxy server:

• Create an Azure Function that forwards requests from your Angular app to Databricks.
• Configure CORS settings in the Azure Function to allow your Angular app's domain.
• Update your Angular application to call the Azure Function endpoint.

Are there any recommended practices or configurations that I might be missing?

When dealing with CORS issues and setting up proxies, consider the following best practices:

• Ensure that your CORS configuration is as restrictive as possible. Only allow specific origins (your Azure Static Web App domain) and specific HTTP methods that are necessary for your application.
• Use environment variables to manage CORS settings and sensitive information like API keys or Databricks credentials. This approach makes your application more secure and easier to maintain.
• Implement robust error handling in your proxy (whether using APIM or Azure Functions). This includes logging errors and providing meaningful responses to the client application.