代码之家 › 专栏 › 技术社区 › Mike Cole

CORS在开发计算机上使用HTTP触发器发布Azure函数

azure-functions cors reactjs

Mike Cole · 技术社区 · 5 年前

我们正在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'
  }
}

有人遇到过这个错误吗?

0 回复 | 直到 4 年前

128

Johan Karlsson 7 年前

要在不使用CLI而使用Visual Studio/VS Code时设置CORS在本地工作,如果没有local.se.json文件,则需要将其添加到项目中。

确保“直接复制到输出”设置为“更新时复制”

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

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

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

Neil 5 年前

For v3+ 以下工作:

附言:请注意 Hosts 与 Values 而不是在它之下(如阿扎德赫·霍扬迪的回答) https://stackoverflow.com/a/48069299/2705777 )

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

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

Matthew Rideout steverb 4 年前

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

生产环境问题的详细说明

我在本地主机和生产环境(firebase托管)上遇到了问题,试图让我的JavaScript Web应用程序与Azure函数交互。

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

在Azure函数中,单击特征选项卡,然后单击 CORS “网络和安全”下的块。

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

QauseenMZ 5 年前

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

在该文件中添加了“CORS”:“*”和“CORS凭据”:false(以下是示例),确实 mvn clean package -DskipTests=true 根,和 mvn azure-functions:run -DenableDebug 在azure函数目录中。

{
  "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://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

Morten_564834 5 年前

对于那些正在做上述所有事情,但仍然没有得到任何工作的人来说,这可能是你的 local.settings.json 文件被完全忽略。我不知道这是不是因为我使用的是v3。

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

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

启动您的应用程序

vimuth 2 年前

您可以在功能应用程序中从托管环境启用CORS,以添加web应用程序URL,请参阅下面的屏幕截图。

在Function应用程序中启用CORS

注:允许所有标记为“*”

Alex Mann 4 年前

我也遇到了同样的问题,罪魁祸首实际上是Firefox显示为CORS错误的DateTimeembedded URI中的拼写错误。解决方案只是意识到它与CORS无关,并修复了错误类型的URI。

HAL9000 2 年前

请注意,应在托管资源的服务器上激活CORS策略。

在我的情况下,尽管我在本地测试我的API,但我访问的是真正的blob存储上的资源,其中没有设置CORS策略。

激活blob存储上的CORS策略 就我而言,解决了这个问题。

Andrei Kniazev 2 年前

我们启用了多个CORS策略,但它不起作用。当我们删除每个CORS策略并只留下“*”(允许所有)时,它起作用了。