Response status code does not indicate success: 400 (Bad Request)

Question

Hi I am trying to connect my Azure Sql Database to my Azure Static Web Apps following this tutorial:
https://learn.microsoft.com/en-us/azure/static-web-apps/database-azure-sql?tabs=bash&pivots=static-web-apps-rest

I am successful when hosting a local server using:
swa start ./src --data-api-location swa-db-connections These are the request functions I use in my vite react app

Caveat: Since my app runs on localhost:5173, I had to append https://4280 to the endpoint string for it to work locally. However I have removed it when pushing to github to build for the static web app.

However when pushing the same code to build for static web app in deployment, I am faced with this error:

Please advice!

Answer 1

@Koh Jun Kai Thanks for your patience on this.

I have summarized our offline discussion and sharing the below answer for the benefit of community.

Upon investigating deeper, we see that there is a mismatch between the password of sql database and also the linked sql database connection of static webapp.

• Using the below cmdlet customer is able to see which password does the static webapp is using to access the db.

az rest --method POST -u /subscriptions/SUBSCRIPTION_ID/resourceGroups/RESOURCE_GROUP/providers/Microsoft.Web/staticSites/APP_NAME/databaseConnections/default/show?api-version=2022-09-01

• Since customer is using sql authentication, suggested them to reset the password of the user and try unlinking and linking the database connection to static webapp. Post that customer confirmed that it is working fine.

Feel free to reach back to me if you have any further questions on this.

Please accept as Yes if the answer provided is useful, so that you can help others in the community looking for remediation for similar issues.

Answer 2

A 400 is a client error which usually means the request is malformed. 400 in particular means that the request could not be understood by the server due to malformed syntax and the client should not repeat the request without modifications. Please try the following steps:

• Add Application Insights to have the Logs available, then try using the Statics Web App and examine the logs. Events section and click More.

• Make sure the request headers and the request body are correct.
• Ensure that your request URL is correct and that the request is being sent to the correct endpoint.
• Make sure the request is sent the correct HTTP method.

Answer 3

Hi Koh,

Have you created a support ticket for this? There are usually 3 troubleshooting steps I recommend:

1. Ensure your configuration file is in your GitHub repository in the swa-db-connections folder at the root of the repository. This is the convention.
2. Ensure that your database is connected to your Static Web App in the Portal with the correct credentials
3. Ensure that your database has its network configured to accept requests from Static Web Apps https://learn.microsoft.com/en-us/azure/static-web-apps/database-azure-sql?tabs=bash&pivots=static-web-apps-rest#configure-database-connectivity

I also want to recommend using the SWA CLI with proxy for your dev server. By running swa start http://localhost:5173 you will be able to access http://localhost:4280 and see your website running
https://azure.github.io/static-web-apps-cli/docs/cli/swa-start/#serve-from-a-dev-server