【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)

简介: 【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)

问题描述

在本地调试Azure Function时,遇见了跨域问题:

Access to XMLHttpRequest at 'http://localhost:7071/api/HttpTriggerToken?tenantId=b7f6f99f-3045-412a-8828-b3044070857e&documentId=6a8ffc27-026f-498e-9936-f6c55db558e5&userId=test-user&userName=Test+User' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

是否有办法区解决这个问题呢?

 

问题解答

可以的。

在本地的调试中,可以修改Function本地的配置文件(local.setting.json),在其中添加CORS配置为通配符”*”,即可解决这个问题。

CORS  定义跨域资源共享 (CORS)可以使用的来源。 以逗号分隔的列表提供来源,其中不含空格。 支持通配符值 (*),它允许使用任何来源的请求。

文件名:local.settings.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node"
  },
  "Host": {
    "CORS": "*"
  }
}

测试效果(成功):

 

参考资料

Function本地配置文件:https://docs.azure.cn/zh-cn/azure-functions/functions-develop-local#local-settings-file

Azure Functions, localhost and CORS how to get them working together when debugging locally : https://sebastian-rogers.medium.com/azure-functions-localhost-and-cors-how-to-get-them-working-together-when-debugging-locally-e48be40a411f

相关文章
|
1月前
|
API C++
【Azure 环境】VS Code登录China Azure(Function)报错 An error occurred while signing in: invalid_request - AADSTS65002
An error occurred while signing in: invalid_request - AADSTS65002: Consent between first party application 'c27c220f-ce2f-4904-927d-333864217eeb' and first party resource '797f4846-ba00-4fd7-ba43-dac1f8f63013' must be configured via preauthorization - applications owned and operated by Microsoft mus
129 13
|
4月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
277 12
|
5月前
|
存储 安全 数据安全/隐私保护
【Azure Function App】在Function App中使用System Managed Identity访问Storage Account
本文介绍了如何在Azure Function中使用托管身份(Managed Identity)替代AzureWebJobsStorage连接函数应用到存储账户,以提高安全性并减少Access Key的使用。具体步骤包括:1) 启用系统分配的身份;2) 为函数应用授予存储访问权限,添加必要角色(如Storage Blob Data Contributor);3) 配置`AzureWebJobsStorage__blobServiceUri`参数指定Blob Service Uri。完成后删除旧配置,即可通过Managed Identity访问Storage Account。
154 19
|
30天前
|
JSON 数据格式
【Azure 环境】当一个Azure Function资源创建很久了,是否可以获取到它的创建时间呢?
用户在尝试获取 Azure Function App 的创建时间时发现,资源 JSON 中缺少 `createdTime` 字段,仅能查看到 `lastModifiedTime`。同时,活动日志和 Azure Resource Graph 查询也未能提供创建时间信息。经解答,Azure 并未为所有资源类型记录创建时间,建议在部署时将创建时间作为标签记录。若创建时间在 90 天内,可通过部署日志间接获取。
|
2月前
|
网络协议 API 网络安全
【Azure Function App】发现部分请求Function App遇见 403.72 报错(请求Body>100KB)
在调用Azure Function的HTTP Trigger时,发送POST请求偶尔出现403错误,且响应为空、Header信息少。经排查发现,当请求Body大于100KB时会触发403.72错误,原因是启用了“Client Certificate mode”为“Optional Interactive User”。解决方法是将该模式设置为“Ignore”。由于TLS重新协商机制限制,大请求体无法正常处理,导致此问题。
115 2
|
6月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
4114 90
|
4月前
|
安全 Linux 开发工具
【Azure Function】分享把Function App从.NET 6.0升级到.NET 8.0 Isolated的步骤
本文介绍了将Azure Function App从.NET 6.0升级到.NET 8.0 Isolated的步骤。.NET 6.0作为长期支持版本,生命周期至2024年11月结束。为确保持续支持,建议升级至更新版本。升级步骤包括安装.NET 8 SDK、更新Azure Functions Core Tools、修改项目文件目标框架为net8.0、更新兼容的NuGet包、本地测试以及重新发布到Azure。更多详细信息可参考官方文档。
206 9
|
8月前
|
C#
【Azure Function】Function App出现System.IO.FileNotFoundException异常
Exception while executing function: xxxxxxx,The type initializer for 'xxxxxx.Storage.Adls2.StoreDataLakeGen2Reading' threw an exception. Could not load file or assembly 'Microsoft.Extensions.Configuration, Version=9.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The system cannot find the
182 64
|
8月前
|
JSON C# 数据格式
【Azure Function】C#独立工作模式下参数类型 ServiceBusReceivedMessage 无法正常工作
Cannot convert input parameter 'message' to type 'Azure.Messaging.ServiceBus.ServiceBusReceivedMessage' from type 'System.String'.
169 73
|
6月前
|
JSON 缓存 前端开发
对CORS(跨域)的一些见解
CORS(跨域资源共享)是W3C标准,用于解决AJAX跨源请求限制。浏览器与服务器需共同支持CORS,浏览器自动处理请求头,开发者无需额外操作。CORS分为简单请求与非简单请求:简单请求满足特定条件(如方法为GET/POST/HEAD且头信息有限制),浏览器直接发送;非简单请求需先进行“预检”请求(OPTIONS方法),确认服务器允许后才发送实际请求。服务器回应需包含Access-Control-Allow-Origin等字段,以控制跨域访问权限。
182 10

热门文章

最新文章