CORS issue in SWA - Data api builder. HTTP 500 error.

[baskarkannappan]

CORS issue in SWA - Data api builder. HTTP 500 error.

Blazor WASM (App Service) <--> DAB API (SWA) <--> SQL DB

I am using the GraphQL and REST for my blazor wasm application.
When i access the api from the browser it is working fine. I am getting the response.
But when it is accessed from the blazor wasm application i am getting the below error message

Access to fetch at 'https://salmon-stone-04cad4f00.4.azurestaticapps.net/data-api/api/GetUserDetailsByEmail?Email=baskar.kannappan%40gmail.com' from origin 'https://myassociationmanager-a4fzcncjasabeyah.southeastasia-01.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response
serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://salmon-stone-04cad4f00.4.azurestaticapps.net/data-api/graphql/' from origin 'https://myassociationmanager-a4fzcncjasabeyah.southeastasia-01.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Below is my folder structure and Configuration content:

D:\MyAssociationManager\MyHouseApp\MyAssociationManager\dab-swa-demo-repo>dir /b
-index.html
-staticwebapp.database.config.json
-staticwebapp.database.schema.gql

--swa-db-connections (folder)
--staticwebapp.database.config.json
--staticwebapp.database.schema.gql

My Config:
{
"$schema": "https://github.com/Azure/data-api-builder/releases/download/v1.2.11/dab.draft.schema.json",
"data-source": {
"database-type": "mssql",
"connection-string": "Server=tcp:myassocger.database.windows.net,1433;Initial Catalog=MyAssoDB;Persist Security Info=False;User ID=myassociadmin;Password=passwrd;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;",
"options": {
"set-session-context": false
}
},
"runtime": {
"rest": {
"enabled": true,
"path": "/api",
"request-body-strict": false
},
"graphql": {
"enabled": true,
"path": "/graphql",
"allow-introspection": true
},
"host": {
"cors": {
"origins": ["https://myassociationmanager-a4fzcncjasabeyah.southeastasia-01.azurewebsites.net", "https://salmon-stone-04cad4f00.4.azurestaticapps.net"],
"allow-credentials": true,
"allowed-headers": [""],
"allowed-methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
},
"authentication": {
"provider": "StaticWebApps"
},
"mode": "development"
}
},
"entities": {
"Organization": {
"source": {
"object": "[admin].[Organization]",
"type": "table",
"key-fields": [
"OrganizationId"
]
},
"graphql": {
"enabled": true,
"type": {
"singular": "Organization",
"plural": "Organizations"
}
},
"rest": {
"enabled": true
},
"permissions": [
{
"role": "anonymous",
"actions": [
{
"action": ""
}
]
},
{
"role": "admin",
"actions": [
{
"action": "*"
}
]
}
],
"relationships": {
"Account": {
"cardinality": "many",
"target.entity": "Account",
"source.fields": [
"OrganizationId"
],
"target.fields": [
"OrganizationId"
],
"linking.source.fields": [],
"linking.target.fields": []
}
}
}
..... other entity
}

[RubenCerna2079]

Hello @baskarkannappan, I checked your config file and I am unsure of why you have the following parameters inside of "cors"

"allowed-headers": [""],
"allowed-methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"]

Based on documentation it should look like

"cors": {
    "origins": ["<array-of-strings>"],
    "allow-credentials": <true> | <false> (default)
}

Here is the documentation of the config file if you want to look further into it https://learn.microsoft.com/en-us/azure/data-api-builder/reference-configuration?tabs=http#cors-host-runtime