Azure / Azure/static-web-apps

CORS Issue when calling an endpoint in a Static Web App

Open
#1,477 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

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:
```js
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?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.