axios CORS与Azure函数从本地主机(非CLI)

h79rfbju  于 2023-05-17  发布在  iOS
关注(0)|答案(9)|浏览(143)

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

有人遇到过这个错误吗?

xytpbqjk

xytpbqjk1#

要在不使用CLI而使用Visual Studio/ VS Code时设置CORS在本地工作-如果没有local.settings.json文件,则需要将其添加到项目中。
确保“直接复制到输出”设置为“如果更新则复制”

然后在“local.settings.json”中添加CORS": "*"如下:

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

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

更多信息:https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local

91zkwejq

91zkwejq2#

对于v3+,可以使用以下方法:
p.s.注意Hosts的位置与Values在同一水平线上,而不是在它下面(如azadeh-khojandi https://stackoverflow.com/a/48069299/2705777的回答)
在本地设置文件local.settings.json中配置CORS:

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

kgsdhlau3#

我们修好了。这是我们Azure函数中的一个配置。你去“平台功能”,然后“CORS”。我们将http://localhost:8080添加到“允许的起源”列表中,然后一切正常。

生产环境问题细化

我在localhost和生产(firebase托管)上遇到了问题,试图让我的JavaScript Web应用程序与Azure Function交互。
跨域资源共享(CORS)允许JavaScript代码在外部主机的浏览器中运行,与您的后台进行交互。
在Azure Functions中,单击【功能】选项卡,然后单击【网络与安全】下的【CORS】区块。
添加您的域作为允许的来源并点击保存。这将解决此问题。

inb24sb2

inb24sb24#

有同样的问题。在后端项目的根目录下,有一个文件local.settings.json。
添加“CORS”:“*”和“CORSCredentials”:false(下面是示例),在root上执行mvn clean package -DskipTests=true,在azure函数目录上执行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://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

9rbhqvlz

9rbhqvlz5#

对于那些正在执行上述所有操作,但仍然没有任何工作的人,可能是您的local.settings.json文件被完全忽略了。我不知道这是不是因为我用的是v3。
转到项目属性->调试->应用程序参数->

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

开始申请

6tr1vspr

6tr1vspr6#

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

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

vcirk6k6

vcirk6k67#

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

gr8qqesn

gr8qqesn8#

请注意,CORS策略应在托管资源的服务器上激活。
在我的例子中,尽管我在本地测试我的API,但我访问的是真实的的blob存储上的资源,其中没有设置CORS策略。

在blob存储上激活CORS策略在我的情况下解决了这个问题。

qmelpv7a

qmelpv7a9#

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

相关问题