0
votes

I'm trying to connect to SignalR Service Azure function from a react front end.

In front

const urlRoot = 'http://localhost:7071/api';
const connection = new HubConnectionBuilder()
    .withUrl(urlRoot
    )
    .build();

In Azure function I allow CORS in local.setting.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureSignalRConnectionString": "xxxxxx"
  },
  "Host": {
    "CORS": "*",
    "CORSCredentials": false
  }
}

But when I run my app a request is triggered to http://localhost:7071/api/negotiate?negotiateVersion=1 ( I don't know why HubConnectionBuilder() is adding negotiateVersion=1

The problem is that I'm getting Cors error even after adding authorization in local.settings.json

Access to XMLHttpRequest at 'http://localhost:7071/api/negotiate?negotiateVersion=1' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

2
The answer at stackoverflow.com/a/42297459/441757 may or may not be relevantsideshowbarker
That doesn't helped meinfodev
Ran in to the same problem. What solution did you find?keft

2 Answers

0
votes

Login to your Azure account and make sure CORS is enabled and http://localhost:3000 is added CORS sETTING

0
votes

If running locally you need to set

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureSignalRConnectionString": "xxxxxx"
  },
  "Host": {
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

Where your react app is running locally on post 3000. As the wildcard is not supported.