Azure function CORS 配置 SignalR 服务不工作

Question

我正在尝试从反应前端连接到 SignalR 服务 Azure function。

在前

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

在 Azure function 我允许CORS在local.setting.json

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

但是当我运行我的应用程序时，请求被触发到http://localhost:7071/api/negotiate?negotiateVersion=1 （我不知道为什么HubConnectionBuilder()添加negotiateVersion=1

问题是，即使在local.settings.json中添加授权后，我仍收到Cors错误

从来源' http://localhost:3000 '访问位于' http://localhost:7071/api/negotiate?negotiateVersion=1 '的XMLHttpRequest已被CORS策略阻止：对预检请求的响应未通过访问控制检查: 当请求的凭证模式为'include'时，响应中'Access-Control-Allow-Origin' header 的值不能为通配符'*'。 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。

Answer 1

登录到您的 Azure 帐户并确保 CORS 已启用并且http://localhost:3000添加了 Z5A244B4B40233EEC

Answer 2

如果在本地运行，则需要设置

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

您的反应应用程序在 3000 后本地运行的位置。因为不支持通配符。

Answer 3

这里的问题不仅仅是 CORS 配置。

连接到 Azure SignalR 服务的方式与我们连接到常规 SignalR 集线器的方式有点不同。

首先，我们需要访问“/api/negotiate”端点并获取访问令牌，使用令牌，我们可以连接到服务。

按照下面我正在使用的代码进行操作：

export const myComponent = () => {

    const [signalRConnection, setSignalRConnection] = useState(null);

    useEffect(() => {

        //Get the access token...
        axios.post("http://localhost:7071/api/negotiate?negotiateVersion=1")
           .then((response) => {
                
                const options = {
                    accessTokenFactory: () => response.data.accessToken,
                };
            
                //Connect using the token
                const newConnection = new HubConnectionBuilder()
                  .withUrl("http://localhost:7071/api", options)
                  .withAutomaticReconnect()
                  .build(HttpTransportType.None);

               setSignalRConnection(newConnection);
           });
       }, []);

   useEffect(() => {
    
       if (signalRConnection) 
       {
           signalRConnection
               .start()
               .then((result) => {
               
                   console.log("Connected SignalR Hub!");

                   signalRConnection.on("myEvent", (message) => {
                     /* Do something.... */
                   });
                });
              })
               .catch((e) => console.log("Connection failed: ", e));
        }
   }, [signalRConnection]);

};

而关于CORS的配置，不能用“*”来指定客户端应用。

使用类似的东西

{
  "Host": {
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}