title: Dotnet Core 3.1 cors issue when serving static image files
body: <p>I host my dotnet core 3.1 API with Angular on different domain than my frontend html site.
  I am using jquery watermark plugin to add watermark on my images, but sometimes, the image shows normally but watermark is not added. When i checked the console, it shows errors that the access to images was blocked by CORS policy. My API are all working correctly without cors issue.</p>
  
  <p>What did i do wrong in my API setup? It seems like normal static files is working but it prompt error when using canvas.toDataURL() to get images.</p>
  
  <p>I configured my Startup.cs Configure method as follows:</p>
  
  <pre><code>public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
      {
          app.UseCors(builder =&gt; builder
           .AllowAnyOrigin()
           .AllowAnyMethod()
           .AllowAnyHeader()
           );
          if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
          }
          else
          {
              app.UseExceptionHandler("/Error");
          }
  
          app.UseStaticFiles(new StaticFileOptions()
          {
              OnPrepareResponse = ctx =&gt; {
                  ctx.Context.Response.Headers.Append("Access-Control-Allow-Origin", "*");
                  ctx.Context.Response.Headers.Append("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
              },
              FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot")),
              RequestPath = new PathString("")
          });
          if (!env.IsDevelopment())
          {
              app.UseSpaStaticFiles();
          }
  
          app.UseRouting();
          app.UseAuthentication();
          app.UseAuthorization();
  
          app.UseEndpoints(endpoints =&gt;
          {
              endpoints.MapControllerRoute(
                  name: "default",
                  pattern: "{controller}/{action=Index}/{id?}");
          });
  
          app.UseSpa(spa =&gt;
          {
              // To learn more about options for serving an Angular SPA from ASP.NET Core,
              // see https://go.microsoft.com/fwlink/?linkid=864501
  
              spa.Options.SourcePath = "ClientApp";
  
              if (env.IsDevelopment())
              {
                  spa.UseAngularCliServer(npmScript: "start");
              }
          });
      }
  </code></pre>
  
  <p>I tried to add configurations to UseStaticFiles 
  but it's still not working</p>
  
  <p>The info below is my request header and response header</p>
  
  <h1>REQUEST HEADER</h1>
  
  <pre><code>GET //imageUploaded/banner_002_bb9d.jpg HTTP/1.1,
  Origin:,
  Referer:,
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
  Chrome/80.0.3987.163 Safari/537.36
  </code></pre>
  
  <h1>RESPONSE HEADER</h1>
  
  <pre><code>Accept-Ranges: bytes
  Content-Length: 119395
  Content-Type: image/jpeg
  Date: Fri, 10 Apr 2020 12:12:14 GMT
  ETag: "1d600678e1fa163"
  Last-Modified: Sun, 22 Mar 2020 16:33:02 GMT
  Server: Microsoft-IIS/10.0
  Warning: 113
  X-Powered-By: ASP.NET
  </code></pre>