提供静态图像文件时 Dotnet Core 3.1 cors 问题

Question

我将我的 dotnet 核心 3.1 API 托管在 Angular 与我的前端 html 站点不同的域中。我正在使用 jquery 水印插件在我的图像上添加水印，但有时，图像显示正常但没有添加水印。当我检查控制台时，它显示对图像的访问被 CORS 策略阻止的错误。我的 API 一切正常，没有 cors 问题。

我在 API 设置中做错了什么？看起来正常的静态文件可以正常工作，但是在使用 canvas.toDataURL() 获取图像时提示错误。

我的Startup.cs配置方法如下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseCors(builder => builder
         .AllowAnyOrigin()
         .AllowAnyMethod()
         .AllowAnyHeader()
         );
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
        }

        app.UseStaticFiles(new StaticFileOptions()
        {
            OnPrepareResponse = ctx => {
                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 =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            // 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");
            }
        });
    }

我尝试将配置添加到 UseStaticFiles 但还是不行

以下信息是我的请求header和回复header

请求HEADER

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

回应HEADER

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

Answer 1

在dotnet core 3.1中，默认情况下，当我们想要提供任何静态文件时，如css、js或images，这些文件应该在wwwroot目录下，你只需要使用下面的函数。

app.UseStaticFiles();

如果这些文件位于 wwwroot 以外的不同目录中，则您需要提供 StaticFileOptions() 实例。

app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider( Path.Combine(Directory.GetCurrentDirectory(), "MyStaticFiles")),
RequestPath = "/StaticFiles" });

有关详细信息，请阅读此处：https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1

Answer 2

经过一些测试，我找到了可行的解决方案。

此代码适用于 app.UseStaticFiles(); 静态文件的正常服务。但是当xhr请求下载静态文件时，需要设置cors才能跨域。

下面的代码是让它工作所需要的

        app.UseStaticFiles(new StaticFileOptions()
        {
            OnPrepareResponse = ctx => {
                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");
            },

        });

希望对您有所帮助

提供静态图像文件时 Dotnet Core 3.1 cors 问题

Dotnet Core 3.1 cors issue when serving static image files

jquery

watermark

cors

.net-core

angular

请求HEADER

回应HEADER