Azure 函数 http 调用在 localhost 上时始终返回 Cross-Origin Request Blocked答案

【问题标题】：Azure function http call always returns Cross-Origin Request Blocked while on localhostAzure 函数 http 调用在 localhost 上时始终返回 Cross-Origin Request Blocked
【发布时间】：2021-04-23 02:59:02
【问题描述】：

我刚开始使用 Azure 函数，当我从 Angular 调用 HTTP 触发器函数时，我得到：

跨域请求被阻止：同源策略不允许读取 [MY_ENDPOINT] 处的远程资源。（原因：CORS 请求未成功）。

我在 localhost 上运行，初始搜索提示我将配置添加到 local.settings.json：

  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
  }

我也尝试了上面的 CORS 我已将我的 local.settings.json 属性设置为 here。

我也尝试导航到项目属性 > 调试 > 应用程序参数并添加

host start --useHttps --cors *

我已经检查是否可以通过 postman 和与之关联的 swagger ui 运行它来获得响应。所以我相信这不是一个红鲱鱼，问题在于浏览器 CORS 预检请求。但是我该如何解决呢？

【问题讨论】：

您是否在本地运行 Angular 项目并在门户上运行 Azure Function？
我在本地运行

标签： cors azure-functions

【解决方案1】：

我在本地重现了错误，并通过与local.settings.json 做同样的事情来解决它。

我问您是否在门户上运行功能，因为您提到了 始终复制 选项。如果您已经将 Function 部署到 Azure，请在 portal 上设置 CORS。

如果您还没有解决这个问题，请告诉我。

【讨论】：

【解决方案2】：

我终于找到答案了。

我的第一次尝试： local.settings.json

"Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
  }

失败，因为当我按 F5 运行项目时 local.settings.json 被忽略，或者因为我通过 https 为我的客户提供服务，而我通过 http 提供我的功能，或者可能两者兼而有之。

我的第二次尝试： 项目 -> 属性 -> 调试 -> 应用程序参数

host start --useHttps --cors * 按 F5 开始

似乎失败了，因为我继续收到错误

跨源请求被阻止：同源策略不允许读取位于 https://localhost:7071/api/foo 的远程资源。（原因：CORS 请求没有成功）

我在 Firefox 中运行我的应用程序，但切换到 chrome 时返回：

net::ERR_CERT_AUTHORITY_INVALID

解决方案 1：（检查想法有效的 hacky 方法）

复制 azure 端点并将其粘贴到浏览器中
接受此网站不安全消息
重新加载客户端

解决方案 2：

创建证书
更新Project -> Properties -> Debug -> Application arguments： host start --useHttps --cert \"myCert.pfx\" --password \"somePassword\"
按 F5
重新加载客户端

【讨论】：