For Conference Captioning, I have a few webpages that I built to help the Deaf and Hard of hearing to get live captions for in-person events: (1 & 2)

I tested it on 2 different Macs, 2 different iPhones, 2 different browsers and on a Windows as well, and when I tap “Get Live Captions”, it returns the captions using a GET API call to this end-point

Problem

I did a demo today for a teacher to implement it for students, but she was not able to pull the data on her Chrome/Safari on her Mac, she even tried to disconnect wifi and try it on her iPhone and the API call was failing with a “CORS error” according to the Chrome inspect.

She was even able to open the end point url in another tab and she was able to see the results.

Code

The front end is pretty simple, here’s the repo, I was able to use JQuery $.support.cors = true to fix the CORS error that was appearing initially.

The backend code is in dotnet 7, and within my ConfigureServices of the Startup.cs file, I have this:

  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>();
    }
  }

Ask

How can I replicate the CORS error she’s facing? And how can I possibly resolve it?