Solution to 'TypeError: Failed to fetch' with ReactJS and Azure Functions

"TypeError: Failed to fetch

\n    at fetchData (http://localhost:3000/static/js/bundle.js:33:32)\n    at http://localhost:3000/static/js/bundle.js:41:5\n    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:27074:30)\n    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:28567:17)\n    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:28539:13)\n    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:28529:11)\n    at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:28519:7)\n    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:30404:7)\n    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:30356:18)\n    at http://localhost:3000/static/js/bundle.js:30171:13"

```text

If you see that it is likely because you don’t have CORS configured.

Add this to local.settings.json

```json

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "UseDevelopmentStorage=true"
  },
  "Host": {
    "CORS": "*",
    "CORSCredentials": false,
    "LocalHttpPort": 7071
  }
}

```javascript

> Change 7071 to the port your function is running on.

If that doesn’t work, then make sure you have access to the function. Sometimes you need to configure it for `anonymous` access in the function.json file

```json

{
  "bindings": [{
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "scriptFile": "../dist/HttpTrigger/index.js"
}