CORS Issue when calling an endpoint in a Static Web App

I have created a simple back-office using SWA https://xxxxxxxxx.azurestaticapps.net/. The data is being used in another website in a different domain lets say https://example.ca. I'm only calling only one endpoint in the SWA from example.ca which is https://xxxxxxxxx.azurestaticapps.net/api/getData and getting the CORS error:

Access to fetch at https://xxxxxxxxx.azurestaticapps.net/api/getData from origin https://example.ca 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

This is the js code being use to call the getData endpoint:

const apiUrl = 'https://xxxxxxxxx.azurestaticapps.net/api/getData';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
   // do something
})
.catch(error => console.error('Error fetching data:', error));

My configurations:

azure-static-web-apps.yml

```yml name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v3 with: submodules: true lfs: false - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_DUNE_07DCAB603 }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "/" # App source code path api_location: "api" # Api source code path - optional output_location: "dist" # Built app content directory - optional ###### End of Repository/Build Configurations ###### close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request Job steps: - name: Close Pull Request id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_DUNE_07DCAB603 }} action: "close" ```

staticwebapp.config at root location

```json { "trailingSlash": "auto", "globalHeaders": { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, OPTIONS" }, "routes": [{ "route": "/api/*", "headers": { "Access-Control-Allow-Origin": "*" } }], "navigationFallback": { "rewrite": "index.html", "exclude": ["/api/*", "/images/*.{png,jpg,gif}", "/css/*"] }, "mimeTypes": { ".json": "text/json" } } ```

Am I missing missing a certain configuration or something else?

Azure / static-web-apps

CORS Issue when calling an endpoint in a Static Web App #1477