首页 > 解决方案 > 带有 SignalR 服务的 Azure 函数 CORS 配置不起作用

问题描述

我正在尝试从反应前端连接到 SignalR Service Azure 功能。

在前

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

在 Azure 功能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

问题是Cors即使在添加授权后我也会出错local.settings.json

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

标签: javascriptazurecorssignalrazure-functions

解决方案


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

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

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


推荐阅读