CODEWITHSUNDEEP
graphqlcorsazure-static-web-appdata-api-builder
Rodney Mort
Rodney Mort

Reputation: 11

CORS Issue With GraphQL Endpoint Hosted With Azure Static Web App Data API Builder

I have a Static Web App using Blazor 8 WASM as the front end and a Data API Builder GraphQL endpoint connected to a Cosmos DB NoSQL database as the back end. I am able to deploy this app and GraphQL API successfully. I can successfully query the GraphQL API directly over the Internet using Postman. My Blazor WASM client app is able to successfully query the GraphQL API and display results in the deployed "production" app (https://mypublicurl.azurestaticapps.net).

My problem is when I run the app in my development environment (using http://localhost:port#) and it calls the production API it fails with error

Access to fetch at 'https://mypublicurl.azurestaticapps.net/data-api/graphql' from origin 'http://localhost:4280' 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.

I have tried adding a few variations for the CORS hosts in the file staticwebapp.database.config.json. For example,

"host": { "cors": { "origins": ["http://localhost:4280", "http://localhost:5196"], "allow-credentials": false },

I've tried variations with and without the trailing slash in the config file. I've tried running the development client with the normal "dotnet watch" command as well as the local SWA emulator with "swa start ...".

No luck yet.

Does anyone have ideas on how to fix this?

This is reproducible for me using a new template project in VS 2022 or VS Code and following the Microsoft documentation on creating the GraphQL endpoint with Data API Builder.

Upvotes: 1

Views: 254

Answers (1)

Todd Gharring
Todd Gharring

Reputation: 1

Yes, I worked with Micorsoft support team and the CORS settings in staticwebapp.database.config.json does not work with static web apps. Its on their roadmap to include this for static web app deployments of Data API Builder but as of my chat in Dec 2023 there was no support. BTW, you can use a proxy server to deliver your CORS.

Upvotes: 0

Related Questions