响应中“Access-Control-Allow-Origin”标头的值不得为 azure 函数和 javascript 中的通配符“*”

Question

您好，我正在使用 c# azure 函数和 java 脚本。我有本地运行的网页，并且也在本地点击了 azure 函数。下面是我的天蓝色函数，它运行在

协商：[POST] http://localhost:7071/api/negotiate

[FunctionName("negotiate")]
    public static async Task<SignalRConnectionInfo> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "post")] HttpRequest req, IBinder binder,
        ILogger log)
    {
        log.LogInformation("C# HTTP trigger function processed a request.");
        var data = await Authenticated(req, log);
        var connectionInfo = binder.Bind<SignalRConnectionInfo>(new SignalRConnectionInfoAttribute { HubName = "MapUpload", UserId = data });
        return connectionInfo;
    }

然后在 local.settings.json 我已经配置

 "Host": {
    "CORS": "*"
  }

下面是我的java脚本代码。

 <script>
   const connection = new signalR.HubConnectionBuilder()
   .withUrl('http://localhost:7071/api/')
   .configureLogging(signalR.LogLevel.Information)
   .build();

   connection.on('MapUpload', productOrdered);
   connection.onclose(() => console.log('disconnected'));

   console.log('connecting...');
   connection.start()
   .then(() => data.ready = true)
   .catch(console.error);
</script>

当我运行我的 javascript 应用程序时，出现以下错误

从源“http://localhost:3872”访问位于“http://localhost:7071/api/negotiate”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：值当请求的凭据模式为“include”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”。XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。

我添加了 "CORS": "*" 但仍然给出上述错误。所以我可以知道上面的代码中是否缺少配置。有人可以帮助他们理解这个问题吗？任何帮助将不胜感激。谢谢

Answer 1

根据fetch 规范credentials，要与模式一起使用cors，您需要设置

• Access-Control-Allow-Credentials到true和
• Access-Control-Allow-Origin不应设置为*

翻译为local.settings.json，

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