CORS 错误 - 无法在大多数设备上复制

Question

对于会议字幕，我构建了一些网页来帮助聋哑人和听力障碍者获取现场活动的实时字幕：(1 & 2)

我在 2 台不同的 Mac、2 部不同的 iPhone、2 个不同的浏览器以及 Windows 上进行了测试，当我点击“获取实时字幕”时，它会使用 GET API 调用将字幕返回到此端点

问题

我今天为一位老师做了一个演示，为学生实现它，但她无法在 Mac 上的 Chrome/Safari 上提取数据，她甚至尝试断开 wifi 并在 iPhone 上尝试，API 调用是根据 Chrome 检查，失败并出现“CORS 错误”。

她甚至能够在另一个选项卡中打开终点网址，并且能够看到结果。

代码

前端非常简单，这是 repo，我也能够使用 JQuery

$.support.cors = true

修复几周前在我的浏览器上出现的 CORS 错误。

后端代码位于 C# dotnet 7 中，在 Startup.cs 文件的

ConfigureServices

中，我有以下内容：

  public class Startup
  {
    public IConfiguration Configuration { get; }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="configuration"></param>
    public Startup(
      IConfiguration configuration)
    {
      Configuration = configuration;
    }

    string  MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    /// <summary>
    /// This method gets called by the runtime. Use this method to add services to the container.
    /// </summary>
    /// <param name="services"></param>
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddCors(options =>
      {
          options.AddPolicy(
            name: MyAllowSpecificOrigins,
            policy  =>
            {
                policy.WithOrigins("https://deafassistant.com",
                                    "*");
            });
      });
      services.AddControllers();

      services.AddSingleton(resolver => resolver.GetRequiredService<IOptions<GlobalOptions>>().Value);
      services.AddHttpContextAccessor();
      services.AddScoped<IStreamService, StreamService>();
      services.Configure<FormOptions>(options =>
      {
        options.ValueCountLimit = int.MaxValue;
      });

      services.AddSwaggerGen(c =>
      {
        c.SwaggerDoc("v1", new OpenApiInfo { Title = "API", Version = "v1.34" });
      });
    }

    /// <summary>
    /// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    /// </summary>
    /// <param name="app"></param>
    /// <param name="env"></param>
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      // If we are in development mode, show the full developer exception page
      if (env.IsDevelopment())
        app.UseDeveloperExceptionPage();

      // Force HTTPS redirection and use core routing
      app.UseHttpsRedirection();
      app.UseRouting();
      app.UseCors(MyAllowSpecificOrigins);
      // Use both authentication and authorization
      app.UseAuthentication();
      app.UseAuthorization();

      // Map controllers to the endpoints
      app.UseEndpoints(endpoints =>
      {
        endpoints.MapControllers();
      });

      //swagger
      app.UseSwagger();
      app.UseSwaggerUI(c =>
      {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "API");
      });
    }

    private IDatabase GetDatabaseService(IServiceCollection services)
    {
      return services.BuildServiceProvider().GetService<IDatabase>();
    }
  }

询问

我如何复制她面临的 CORS 错误？我该如何解决它？

Answer 1

我不确定你将如何复制她面临的 CORS 错误。我可能会记下她收到的具体 CORS 错误消息，这样我就知道如何进行故障排除。

大多数时候，CORS 错误可能与服务器、API 和设备浏览器之间握手时的权限问题有关。

您可能需要将您的 api 调用列入白名单。

您可以参考这个工具，看看它可以帮助您解决这个问题 --> https://github.com/Rob--W/cors-anywhere?tab=readme-ov-file

另请阅读 MDN 文档，了解有关 CORS 错误的更多信息，以便您可以解决此问题。