来自本地主机（不是 CLI）的带有 Azure 功能的 CORS答案

【问题标题】：CORS with Azure function from localhost (not CLI)来自本地主机（不是 CLI）的带有 Azure 功能的 CORS
【发布时间】：2017-10-01 17:03:28
【问题描述】：

我们在 vue.js 应用程序中使用 axios 来访问 Azure 函数。现在我们收到此错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

我们正在尝试以这种方式在函数中设置响应标头：

context.res = {
  body: response.data,
  headers: {   
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Origin': 'http://localhost:8080',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Request-Headers': 'X-Custom-Header'
  }
}

有人遇到过这个错误吗？

【问题讨论】：

托管您的 api 代码的服务器上是否启用了 CORS？
不确定你的意思。我们使用的是 Azure 函数，所以我们不配置服务器。
因此您从 Azure 请求的资源未配置此标头“Access-Control-Allow-Origin”。因此，例如，如果该标头由服务器设置为“Access-Control-Allow-Origin”：www.google.com，则意味着该 azure 函数允许来自 google 的请求。
您应该阅读有关 CORS 请求的信息。基本上，当浏览器看到域不同时，它会单独调用请求的域以获取“Access-Control-Allow-Origin”标头，以查看允许哪些外部域访问服务器。如果您请求 FROM 的域未在标头中列出，则浏览器不允许请求继续进行。
您是否尝试过通过Function App Settings 启用 CORS？

标签： azure cors azure-functions axios

【解决方案1】：

要在不使用 CLI 并且使用 Visual Studio/VS Code 时设置 CORS 在本地工作 - 如果项目不存在，则需要将 local.settings.json 文件添加到项目中。

确保“直接复制到输出”设置为“如果较新则复制”

然后在你的“local.settings.json”中你可以像这样添加CORS": "*"：

{
  "IsEncrypted": false,
  "Values": {

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

【讨论】：

这不起作用。默认的 VS Azure 函数模板已经有这个文件并且 CORS 设置为 *.但是，如果您尝试从另一个运行 localhost（但端口不同）的网站访问 localhost API，它将无法正常工作。

【解决方案2】：

我们让它工作了。这是我们 Azure 函数中的一个配置。您转到“平台功能”，然后转到“CORS”。我们将 http://localhost:8080 添加到“允许的来源”列表中，然后一切正常。

生产环境问题详解

我在 localhost 和生产（firebase 托管）上遇到问题，试图让我的 JavaScript Web 应用程序与 Azure 函数交互。

跨源资源共享 (CORS) 允许在外部主机上的浏览器中运行的 JavaScript 代码与您的后端交互。

在 Azure Functions 中，单击功能选项卡，然后单击“网络和安全”下的 CORS 块。

将您的域添加为允许的来源并点击保存。这将解决问题。

【讨论】：

我不确定这是否非常安全。任何人都可以在 8080 端口上运行本地托管的应用程序。
问题是关于本地主机的。我遇到了同样的错误，它甚至还没有发布到 Azure。

【解决方案3】：

对于v3+，以下工作：

附言请注意，Hosts 的位置与Values 位于同一级别，而不是在其下方（如 azadeh-khojandi https://stackoverflow.com/a/48069299/2705777 的回答）

在本地设置文件local.settings.json中配置CORS：

{
  "Values": {
  },
  "Host": {
    "CORS": "*"
  }
}

【讨论】：

【解决方案4】：

对于那些正在执行上述所有操作但仍然没有任何工作的人，可能是您的 local.settings.json 文件被完全忽略了。不知道是不是因为我用的是v3。

转到项目的属性 -> 调试 -> 应用程序参数 ->

host start --build --port 7071 --cors * --pause-on-error

启动您的应用程序

【讨论】：

你是超级救命稻草
--cors * 对我不起作用。但是--cors http://localhost:8080 做到了。使用 Python Azure funcs v3。

【解决方案5】：

有同样的问题。在后端项目的根目录下，有一个文件 local.settings.json。

在该文件中添加了 "CORS": "*" 和 "CORSCredentials": false （以下是示例），在根目录中添加了 mvn clean package -DskipTests=true，在天蓝色函数目录中添加了 mvn azure-functions:run -DenableDebug。

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "<language worker>",
    "AzureWebJobsStorage": "<connection-string>",
    "AzureWebJobsDashboard": "<connection-string>",
    "MyBindingConnection": "<binding-connection-string>"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
  },
  "ConnectionStrings": {
    "SQLConnectionString": "<sqlclient-connection-string>"
  }
}

参考：

https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

【讨论】：

【解决方案6】：

我遇到了同样的问题，罪魁祸首实际上是 Blazor-embedded-URI 中的拼写错误，Firefox 显示为 CORS 错误。解决方案只是意识到它与 CORS 无关并修复错误输入的 URI。

【讨论】：