CORS issue when consuming a prompt flow endpoint

Question

CORS issue when consuming a prompt flow endpoint

27851973 10

Feb 27, 2024, 11:31 PM

I am encountering a CORS issue while trying to consume a prompt flow endpoint, and I cannot find a way to enable it for my desired target URL. How can I resolve this issue?

romungi-MSFT 48,776 Reputation points Microsoft Employee

Feb 29, 2024, 8:34 AM

@27851973 Try following this advice from troubleshooting guidance where CORS can be enabled on the storage account.
Julian 10 Reputation points

Feb 29, 2024, 11:12 AM

Actually I am also facing the same issue and doing so with the CORS parameters on the storage account didn't solve the issue in my case. I have an error message in my browser telling my that :
No "Access-Control-Allow-Origin" header is present in the requested resource. I don't know how to solve this
romungi-MSFT 48,776 Reputation points Microsoft Employee

Feb 29, 2024, 11:29 AM

While using the endpoint API try adding the following header in your request.

access_control_allow_origins : Enable CORS for the specified origins. Separate multiple origins with ",". Example: "microsoft.com, bing.com"

https://learn.microsoft.com/en-us/azure/machine-learning/how-to-inference-server-http?view=azureml-api-2#server-parameters
27851973 10 Reputation points

Mar 6, 2024, 6:12 PM

I will rephrase my question:

We have created a prompt flow endpoint and client app is not able to access the API due to CORS issue. So we need to add client app domain in the CORS setting of this endpoint but we are not able to find any way to do that.
Julian 10 Reputation points

Mar 7, 2024, 2:00 PM
Indeed, this is not something editable directly within Azure ML Studio. Fortunately (or unfortunately...) I managed to bypass this by wrapping the Azure ML endpoint in an OpenAPI within the Azure API Management service. This is how I did:

Download the swagger (JSON file) from the URL of the Azure ML endpoint

In the Azure API Management service, create an OpenAPI with the aforementioned swagger.json

When creating the API, specify the Azure ML endpoint URL (without the route) in the field "Web service URL"

In the Azure API Management, go to "Portal Overview", click on "Enable CORS" and then click on the link below "Manually apply it on the global level".

Copy the HTML code, and go to your new API "Display" settings, edit the inbound processing rules by adding CORS policy

Replace the rules (if any created by default) with the copied code, and then, in the "allowed-origins" tag add the URL of the frontend and the base URL of your new OpenAPI (accessible in the settings tab)

Now, I'm not saying this is the best way to do it, but this is how I managed to use my Azure ML endpoint with a frontend. Very inconvenient as I had to deploy further services, costing even more money, just to be able to parametrize something very basic for the communication between an endpoint and other services, like a web browser.