При работе с файлами изображений stati c возникают проблемы с tnet Core 3.1 - PullRequest
Новая
       62

При работе с файлами изображений stati c возникают проблемы с tnet Core 3.1

0 голосов
/ 11 апреля 2020

Я размещаю свой do tnet core 3.1 API с Angular в другом домене, чем мой сайт html. Я использую jquery плагин водяного знака для добавления водяного знака на мои изображения, но иногда изображение отображается нормально, но водяной знак не добавляется. Когда я проверил консоль, он показывает ошибки, что доступ к изображениям был заблокирован политикой CORS. Все мои API работают правильно, без проблем с корсами.

Что я сделал не так в моей настройке API? Кажется, что нормальные файлы stati c работают, но выдают ошибку при использовании canvas.toDataURL () для получения изображений.

Я настроил свой метод Startup.cs Configure следующим образом: 

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, но он все еще не работает

Информация ниже - это заголовок моего запроса и заголовок ответа

REQUEST 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

RESPONSE 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

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Я нашел работоспособное решение после некоторого тестирования.

Этот код работает app.UseStaticFiles(); для обычной подачи файлов c. Но когда файлы stati c будут загружены с запросом 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");
            },

        });

Надеюсь, это поможет

0 голосов
/ 11 апреля 2020

В do tnet core 3.1 по умолчанию, когда мы хотим обслуживать любой файл stati c, например css, js или изображения, эти файлы должны находиться в каталоге 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

...