Локальная папка wwwroot в проекте backend. Как её получить во frontend’e?
Есть проект backend’a написанный на c#. и Проект frontend’a на react. Я хочу получить файлы из локальной папки на беке, чтобы отобразить документ(картинку, не особо важно). И суть в том, что фронт не видит эту папку разумеется, потому что она в другом проекте. Как мне её подключить к фронту? Или каким-то особым образом указать у компонента в атрибуте src? К примеру:
Не работает
Отслеживать
6,695 6 6 золотых знаков 11 11 серебряных знаков 30 30 бронзовых знаков
задан 15 фев 2023 в 6:43
75 9 9 бронзовых знаков
Не обязательно в УРЛ указывать физически существующие папки. Ведь сервер (все равно на чем писан) может обрабатывать любые запросы к нему. Как то запросы с началом http://files/ <тут_любое>отрабатывать следующим образом. Берем оставшуюся часть УРЛ (тут_любое). Смотреть некую папку на наличие в ней тут_любое и если это любое есть — отправлять в ответе.
15 фев 2023 в 8:16
@ksa Мне не понятно. Мне надо получить вполне существующий документ, который находится по директории backend\wwwroot\files Проект, аля на адресе localhost:8000 видит только то, что находится в frontend\public\ 2 разных проекта. Если я ввожу того, чего нет во front’e, но есть в back’e, то он мне ничего не выводит
15 фев 2023 в 10:39
Так если нечего не менять на беке — оно так и работает. А вот если дописать обработку запросов с УРЛ, которые начинаются на некое «ключевое слово» — сам бек может брать файлы откуда пожелает или откуда ему открыт доступ. У меня все на JS, сервер на Node.js и мои примеры тебе мало помогут. Тут главное понять суть «дополнительной» обработки запросов к серверу.
IIS — Вкладка
Данная вкладка используется для изменения расположения домашнего каталога веб-узла (по умолчанию — /Wwwroot).
Чтобы заменить расположение домашнего каталога, выберите одну из перечисленных ниже возможностей:
- Каталог, размещенный на конфигурируемом сервере; например, C:\Catalog\Shoes. Для поиска файла на локальном диске нажмите кнопку Обзор.
- Общая папка другого компьютера; например, \\webserver\htmlfiles. Введите имя и пароль пользователя, необходимые для доступа к этому компьютеру.
- Постоянный адрес URL; например, http://tempserver. Веб-обозреватели, запрашивающие ресурс по исходному адресу URL, автоматически получают направление на адрес URL, содержащийся в поле Адрес, что дает возможность повторно запросить ресурс. Чтобы переадресовать запрос на виртуальный каталог, следует использовать виртуальный путь; например /newcatalog.
Разрешения
Чтение Выберите эту возможность, чтобы разрешить пользователям читать и загружать файлы или каталоги и связанные с ними свойства.
Запись Выберите эту возможность, чтобы разрешить пользователям загружать файлы и связанные с ними свойства в каталог на сервере или изменять содержимое файлов, не защищенных от записи. Запись возможна только при использовании веб-обозревателя, который поддерживает функцию Put в стандарте протокола HTTP 1.1.
Доступ к тексту сценария Выберите эту возможность, чтобы разрешить пользователям доступ к исходным текстам, если установлено разрешение «Чтение» или «Запись». Исходные тексты включают сценарии в приложениях ASP.
Обзор каталогов Выберите эту возможность, чтобы показать пользователю гипертекстовый список файлов и подкаталогов этого виртуального каталога. Виртуальные каталоги не появятся в списке каталогов; пользователи должны знать псевдоним виртуального каталога.
Важно ! Веб-сервер будет возвращать сообщение об ошибке «Запрет доступа» при попытке доступа к файлу или каталогу, для которого выполняются оба приведенных ниже условия:
-
Обзор каталогов запрещен.
Запись в журнал Выберите эту возможность, чтобы записывать посещения этого каталога в файл журнала. Посещения записываются только при включенном ведении журнала для веб-узла.
Индексация каталога Выберите эту возможность, чтобы позволить Microsoft Indexing Service включить этот каталог в полный текстовый индекс веб-узла. Полный текстовый индекс веб-узла делает возможным быстрый поиск слов или фраз в опубликованных документах.
Параметры приложения
Веб-приложение IIS определяется структурой каталога, в котором оно находится. Чтобы назначить данный каталог исходным каталогом приложения (и таким образом создать приложение), нажмите кнопку Создать. Чтобы прекратить связывание домашнего каталога с приложением, нажмите кнопку Удалить.
Разрешения на запуск
Разрешения на запуск определяют уровень выполнения программ, позволенный для ресурсов этого узла или виртуального каталога.
- Нет. Доступ возможен только к статическим файлам, например HTML или файлам изображений.
- Только сценарии Могут быть запущены только сценарии, например сценарии ASP.
- Сценарии и исполняемые файлы Доступ и выполнение возможны для всех типов файлов.
Защита
Выберите процесс, в котором будет выполняться приложение: в том же процессе, что и веб-службы (низкая); в изолированном групповом процессе, в котором выполняются другие приложения (средняя), или в процессе, изолированном от других процессов (высокая).
Клиент будет отправлен
Эти параметры становятся доступными, когда выбран параметр постоянный адрес URL.
на введенный выше адрес URL — запросы перенаправляются из виртуального каталога на заданный адрес URL без добавления какой либо части исходного адреса URL. Этот параметр позволяет переадресовать весь виртуальный каталог на один файл. Например, чтобы перенаправить все запросы к виртуальному каталогу /Scripts на файл Default.htm в домашнем каталоге, введите /Default.htm в поле Адрес и выберите этот параметр.
в подкаталог указанного каталога — запросы к родительскому каталогу перенаправляются в дочерний каталог. Например, для перенаправления запросов к домашнему каталогу (обозначается косой чертой /) к подкаталогу /newhome, введите /newhome в поле Адрес и выберите этот параметр. Если этот флажок снят, веб-сервер будет сопоставлять родительский каталог с ним же самим.
на постоянный адрес для данного ресурса — клиенту отправляется следующее сообщение: «301 Permanent Redirect» (постоянное перенаправление). Перенаправления рассматриваются как временные и в обозревателе клиента будет получено следующее сообщение: «302 Temporary Redirect» (временное перенаправление). Некоторые веб-обозреватели могут использовать сообщение «301 Permanent Redirect» как сигнал к постоянному изменению адреса URL, например, с помощью закладки.
Статические файлы
Установка каталога статических файлов. UseStaticFiles
Последнее обновление: 20.12.2021
Ранее уже рассматривалась отправка статических файлов. В частности, для отправки файлов мы могли использовать метод SendFileAsync() объекта HttpResponse:
var builder = WebApplication.CreateBuilder(); var app = builder.Build(); app.Run(async (context) => await context.Response.SendFileAsync("index.html")); app.Run();
Однако ASP.NET Core также предоставляет специальный встроенный middleware, который подключается с помощью метода UseStaticFiles() и который упрощает работу со статическими файлами.
При использовании этого middleware применяются некоторые условности. В частности, по умолчанию для определения пути хранения статических файлов в проекте используются два параметра ContentRoot и WebRoot , а сами статические файлы должны помещаться в каталог ContentRoot/WebRoot . На стадии разработки параметр «ContentRoot» соответствует каталогу текущего проекта. А параметр «WebRoot» по умолчанию представляет папку wwwroot в рамках каталога ContentRoot. То есть, исходя из значений по умолчанию, то статические файлы следует располагать в папке «wwwroot», которая должна находиться в текущем проекте. Однако эти параметры при необходимости можно переопределить.
В разных типах проектов ASP NET Core данная папка может уже быть по умолчанию в проекте, а может отсутствовать. Например, в проекте по типу Empty данная папка отсутствует, поэтому ее надо добавлять вручную.
Итак, возьмем проект по типу Empty и добавим в него новую папку wwwroot . Далее добавим в папку wwwroot новый файл index.html . То есть у нас получится следующий проект:
Изменим код файла index.html, например, следующим образом:
METANIT.COM Index Page
Для того, чтобы клиенты могли обращаться к этому файлу, подключим соответствующий компонент middleware с помощью метода UseStaticFiles() :
var builder = WebApplication.CreateBuilder(); var app = builder.Build(); app.UseStaticFiles(); // добавляем поддержку статических файлов app.Run(async (context) => await context.Response.WriteAsync("Hello World")); app.Run();
Для подключения функциональности работы со статическими файлами применяется метод UseStaticFiles() , который реализован как метод расширения для типа IApplicationBuilder.
Теперь, если мы обратимся к добавленному файлу, например, по пути /index.html , то нам отобразится содержимое данной веб-страницы:
По всем остальным запросам браузер выводил бы строку «Hello World».
Если бы index.html находился бы в какой-то вложенной папке, например, в wwwroot/html/ , то для обращения к нему мы могли бы использовать путь /html/index.html . То есть middleware для работы со статическими сайтами автоматически сопоставляет запросы с путями к статическим файлам в рамках папки wwwroot.
Изменение пути к статическим файлам
Что делать, если нас не устраивает стандартная папка wwwroot. И мы, к примеру, хотим, чтобы все статические файлы в проекте находились в папке static . Для этого добавим в проект папку static в проект и определим в ней какой-нибудь html-файл. Пусть он будет называться content.html :
Допустим, в этом файле будет какое-нибудь простейшее содержимое:
METANIT.COM Content from Static folder
Чтобы приложение восприняло эту папку, изменим код создания хоста в файле Program.cs:
var builder = WebApplication.CreateBuilder( new WebApplicationOptions < WebRootPath = "static">); // изменяем папку для хранения статики var app = builder.Build(); app.UseStaticFiles(); // добавляем поддержку статических файлов app.Run(async (context) => await context.Response.WriteAsync("Hello World")); app.Run();
Для добавления пути к файлам используется перегруженная версия метода CreateBuilder() , которая в качестве параметра принимает объект WebApplicationOptions . Его свойство WebRootPath позволяет установить папку для статических файлов.
И после этого мы также сможем обращаться к статическим файлам из папки static :
Поместите статические файлы в папки, кроме wwwroot
О местоположении размещения по умолчанию для статических файлов
Статические файлы (.js, .css, .png и т.д.) по умолчанию находятся под папкой wwwroot. Это позволяет пользователям веб-сайта видеть .js и .css файлы непосредственно вместе с HTML и отражать их на экране.
Папка размещения по умолчанию для этого статического файла wwwroot, Startup.Configure потому что он называет следующий app.UseStaticFiles метод, описанный в методе:
public class Startup < // 省略 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) < // 省略 app.UseStaticFiles(); // 省略 > > Путь физической папки «wwwroot» является «https://lt;host name’gt;/» в URL. В качестве примера, файл в wwwroot-образный образец.png можно найти в URL под https://lt;host name’gt;/image.png и образец.»
Файлы, размещенные за пределами папки wwwroot, по существу не ссылаются на URL-адрес в Интернете.
Как разместить статические файлы в дополнение к папке wwwroot и изменить путь ссылки на URL
Конфигурация folder
На этот раз я хочу оставить функцию папки wwwroot, но и поместить файл изображения в отдельную папку, чтобы его можно было ссылаться в Интернете.
Конфигурация папки проекта должна быть следующей, чтобы можно было видеть файлы изображений в папке Содержимое каждого сайта в областях.
В этом состоянии URL-.png файл в примере1.png
- https://lt;hostname-gt;/arenas/site1/content/image/sample1.png
- https://lt;Hostname-gt;/site1/content/image/sample1.png
может показаться, что это было бы, но здесь
- https://lt;Hostname-gt;/site1/image/sample1.png
Кстати, если вы поместите статический файл в дополнение к папке wwwroot, действие сборки файла может быть отсутствует. Если вы продолжаете публиковать, файл не будет размещен, так что не забудьте установить его обратно в содержание.
Добавить программу
Чтобы сделать статические файлы доступными в папках, не являяся wwwroot, Startup.Configure позвоните app.UseStaticFiles дополнительным методам в методе следующим образом:
// 追加 using Microsoft.Extensions.FileProviders; using System.IO; // 省略 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) < // 省略 // wwwroot フォルダで静的ファイル参照を有効にする app.UseStaticFiles(); // Site1 用の物理コンテンツフォルダと参照 URL を紐づける app.UseStaticFiles(new StaticFileOptions() < FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")), RequestPath = "/Site1", >); // Site2 用の物理コンテンツフォルダと参照 URL を紐づける app.UseStaticFiles(new StaticFileOptions() < FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site2/Content")), RequestPath = "/Site2", >); // 省略 > app.UseStaticFiles Вызов метода без аргументов позволяет папку wwwroot. Вы можете добавить StaticFileOptions дополнительные настройки, передав к первому аргументу.
StaticFileOptions.FileProvider Определяет физическую PhysicalFileProvider папку, которую вы хотите, чтобы свойство относиться к статическому файлу при передаче экземпляра . Файл под указанным здесь путем является файлом, на который можно ссылаться в Интернете. Он также может быть RequestPath корнем URL для следующих свойств:
env.ContentRootPath Свойство содержит корневой путь (физический путь) веб-программы. Это хорошая идея, чтобы объединить это с относительным путем к целевой папке.
StaticFileOptions.RequestPath Свойство описывает корневой путь URL-адреса, который ссылается на статический файл. Wwwroot по https:// умолчанию основан на . Как и в RequestPath = «/Site1» вышеупомянутом коде, если вы пишете https:///Site1 является корнем. Это Areas/Site1/Content/xxxx связывает физический https:///Site1/xxxx путь с URL.
Используя пример .png примере, Areas/Site1/Content/image/sample.png файл можно https:///Site1/image/sample.png ссылаться на пути.
Проверка работы
index.html Поместите тег img, чтобы вы могли видеть изображение следующим образом: Путь также ссылки site1 и site2 изображения, как определено.
省略 --> div class="text-center"> h1 class="display-4">Welcomeh1> p>Learn about a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Corea>.p> div> ここから追加 --> img src="~/image/sample.png" /> img src="~/site1/image/sample1.png" /> img src="~/site2/image/sample2.png" /> ここまで追加 --> Если вы запустите его и увидеть изображение, это успех.