reactjs 为什么我在从React Azure Static Web App向我的.NET Azure函数发出请求时会收到“被CORS策略阻止”错误?

jbose2ul  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(99)

我正在开发一个web应用,前端是react(azure静态web应用),后端是dotnet(部署为azure函数)。我遇到了CORS错误:

  • CORS策略已阻止从源'https://www.example.com'访问位于'/limitMasterDetails/segmentLimit '的XMLHttpRequest:nice-sea-xxxxxxxx.3.azurestaticapps.net请求的资源上不存在“Access-Control-Allow-Origin”标头。* Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.*

我尝试了以下步骤:

  • 修改函数应用程序CORS配置以允许原点
  • 修改API级别的APIM核心策略以允许来源
  • 在Startup.cs类中添加CORS策略。
  • 修改函数app host.json以允许origin
  • 已清除浏览器缓存,并在其他浏览器上尝试。

这些步骤都没有帮助。请指示。

cgvd09ve

cgvd09ve1#

当Web应用程序试图向不同的域、协议或端口发出请求,而服务器没有显式允许时,就会出现错误blocked by CORS policy

  • 检查Azure Function CORS设置。

  • 将Azure Web App的来源添加到允许的来源。

  • 如果使用自定义头或HTTP方法,请将它们添加到“允许的头”和“允许的方法”。
  • 检查您是否已在Azure Function项目中安装Microsoft.Azure.WebJobs.Extensions.Http NuGet包及其依赖项。

检查Azure Static Web App设置,确保您已将Azure Function的URL和端点正确放置在React Azure Static Web App配置中。
如果在Azure Function之前使用Azure API管理,请查看APIM中的CORS设置并检查是否允许源。在Startup.cs文件中

public class Startup : FunctionsStartup
{
    public override void Configure(IFunctionsHostBuilder builder)
    {
        builder.Services.AddCors(options =>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader();
            });
        });
    }
}

如果问题仍然存在,您需要检查是否有任何其他CORS settings覆盖您的功能应用程序设置。
有关详细信息,请参阅MS Doc1和MS Doc2。

相关问题