0

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 weeks ago on my browser too.

The backend code is in C# 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?

2 Answers 2

1

So the problem ended up being that the client was using a different url! I had shared https://deafassistant.com/tdsb but she went to https://www.deafassistant.com/tdsb, so there's an extra www. that makes a huge difference apparently.

Because as you can see in the question, I had set the policy to

policy.WithOrigins("https://deafassistant.com","*");

so I had to change that to

policy.WithOrigins("https://deafassistant.com","https://www.deafassistant.com","*");

And it began to work.

I also started having other issues, that I was able to fix by adding these two lines as well

.AllowAnyMethod()
.AllowAnyHeader();

0

I'm not sure how you are going to replicate the CORS error she's facing. I'd probably have taken note of the specific CORS error message she got so I'd know how to go about troubleshooting.

Most times, the CORS error might be related to permission issues at the point of handshake between the server, the api and the device's browser.

You might need whitelist your api call.

You can consult this tool to see it can help you solve this issue --> https://github.com/Rob--W/cors-anywhere?tab=readme-ov-file

Also read through the MDN Docs to know more about CORS Errors so you can troubleshoot your way out of this issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.