CORS error when using durable functions with staic webapp

Question

CORS error when using durable functions with staic webapp

kanna 106

I have modified existing application to use durable functions, now frontend tries to get status by accessing statusQueryGetUri but I'm getting CORS error
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and following error when I try to access statusQueryGetUri my self in the browser

{"code":400,"message":"Login not supported for provider azureStaticWebApps"}

Do I have to configure anything on portal to allow access to statusQueryGetUri url from static web app, the function app is linked to static webapp already.

kanna 106 Reputation points

2022-02-19T10:02:27.98+00:00

I added static web app url to allow CORS, that solved the first error but still having issue {"code":400,"message":"Login not supported for provider azureStaticWebApps"}
Lohith GN 516 Reputation points

2022-02-20T12:41:35.22+00:00

Looks like you are building Azure Static Web App.

But when you created Azure Function for your Static Web App - what choice did you make? There are 2 choices:

Managed functions: By default, the API of a static web app is an Azure Functions application managed and deployed by Azure Static Web Apps associated with some restrictions.

Bring your own functions: Optionally, you can provide an existing Azure Functions application of any plan type, which is accompanied by all the features of Azure Functions. With this configuration, you're responsible to handle a separate deployment for the Functions app.

If you chose Managed Functions way then Durable Functions are not supported in this model. You will need to go the route of BYOF way. Check this documentation for more details: https://learn.microsoft.com/en-us/azure/static-web-apps/apis
Especially - check the Feature differences table.

Hope this helps.
kanna 106 Reputation points

2022-02-28T09:34:20.88+00:00

I could not use HTTP endpoint to query the status, I had to create another http trigger that returns status.
I documentation asks to use system keys but not clear what system keys are? Do I have to create new ones?
ZIMA Lowell 0 Reputation points

2024-02-08T14:01:23.71+00:00

impossible to delete a comment.
ZIMA Lowell 0 Reputation points

2024-02-08T14:02:07.47+00:00
Is there any solution for this problem ? it's been 4 days I tried to have an another response than

{"code":400,"message":"Login not supported for provider azureStaticWebApps"}
Gerwin de Kruijf 0 Reputation points

2024-02-27T13:17:14.95+00:00

In my Vue frontend, I used VUE_APP_BASE_URL to point to the backend api. The problem I had was that my api endpoints were like: /chat, /login, etc. However, I had to change these to /api/chat, api/login for both the backend en the frontend. Then it worked.

Also make sure that your Azure Static Web App has your backend as API listed. Go to your Azure Static Web App in Azure Portal, go to API's, then add your Web service.

Make sure that CORS is enabled in your backend for the static web app url

1 answer

Your answer

kanna 106 Reputation points

2022-02-19T10:02:27.98+00:00

I added static web app url to allow CORS, that solved the first error but still having issue {"code":400,"message":"Login not supported for provider azureStaticWebApps"}
Lohith GN 516 Reputation points

2022-02-20T12:41:35.22+00:00

Looks like you are building Azure Static Web App.

But when you created Azure Function for your Static Web App - what choice did you make? There are 2 choices:

Managed functions: By default, the API of a static web app is an Azure Functions application managed and deployed by Azure Static Web Apps associated with some restrictions.

Bring your own functions: Optionally, you can provide an existing Azure Functions application of any plan type, which is accompanied by all the features of Azure Functions. With this configuration, you're responsible to handle a separate deployment for the Functions app.

If you chose Managed Functions way then Durable Functions are not supported in this model. You will need to go the route of BYOF way. Check this documentation for more details: https://learn.microsoft.com/en-us/azure/static-web-apps/apis
Especially - check the Feature differences table.

Hope this helps.
kanna 106 Reputation points

2022-02-28T09:34:20.88+00:00

I could not use HTTP endpoint to query the status, I had to create another http trigger that returns status.
I documentation asks to use system keys but not clear what system keys are? Do I have to create new ones?
ZIMA Lowell 0 Reputation points

2024-02-08T14:01:23.71+00:00

impossible to delete a comment.
ZIMA Lowell 0 Reputation points

2024-02-08T14:02:07.47+00:00

Is there any solution for this problem ? it's been 4 days I tried to have an another response than

{"code":400,"message":"Login not supported for provider azureStaticWebApps"}
Gerwin de Kruijf 0 Reputation points

2024-02-27T13:17:14.95+00:00

In my Vue frontend, I used VUE_APP_BASE_URL to point to the backend api. The problem I had was that my api endpoints were like: /chat, /login, etc. However, I had to change these to /api/chat, api/login for both the backend en the frontend. Then it worked.

Also make sure that your Azure Static Web App has your backend as API listed. Go to your Azure Static Web App in Azure Portal, go to API's, then add your Web service.

Make sure that CORS is enabled in your backend for the static web app url

Answer 1

In my Vue frontend, I used VUE_APP_BASE_URL to point to the backend api. The problem I had was that my api endpoints were like: /chat, /login, etc. However, I had to change these to /api/chat, api/login for both the backend en the frontend. Then it worked.
Also make sure that your Azure Static Web App has your backend as API listed. Go to your Azure Static Web App in Azure Portal, go to API's, then add your Web service.
Make sure that CORS is enabled in your backend for the static web app url

Share via

CORS error when using durable functions with staic webapp

1 answer

Your answer