Нет заголовка «Access-Control-Allow-Origin» в ядре asp и angular7 - PullRequest
Новая
       22

Нет заголовка «Access-Control-Allow-Origin» в ядре asp и angular7

1 голос
/ 07 мая 2019

Мне нужно загрузить изображение из серверной части Asp Core 2.2 и показать его в Angular.

Я создаю компонент для показа изображения в угловом формате:

в HTML-код: 

<img [src]="src$ | async" class="img-fluid img-thumbnail">

в файле Ts: 

  @Input() ImagePath: string;
  ImageBlob: any;

  public src$: Observable<SafeUrl>;
  private imageSrc$: BehaviorSubject<string>;

  constructor(private downloadService: DownloadService, private domSanitizer: DomSanitizer) {
    this.imageSrc$ = new BehaviorSubject(null);
    this.src$ = this.imageSrc$.pipe(switchMap(src => this.getImage(this.ImagePath)));
  }

  ngOnChanges() {
    this.imageSrc$.next(this.ImagePath);
  }

  private createImage(blob: Blob) {
    console.log('CREATE_IMAGE');
    return this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));
  }

  private getImage(url: string) {
    console.log('GET_IMAGE');
    return this.downloadService
      .DownloadImage(this.ImagePath)
      .pipe(map((blob: Blob) => this.createImage(blob)));
  }
}

и в Сервисе: 

DownloadImage(ImageUrl: string): Observable<Blob> {
    return this.httpClient.get(ImageUrl, { responseType: 'blob' });
 }

Теперь, когда мне нужно показать изображение, оно показывает мне эту ошибку в консоли:

Доступ к XMLHttpRequest по адресу https://localhost:44372/Uplaod/NewsPictureFolder/NewsMainPicture/903797628068313.jpg' от источника 'http://localhost:4200' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

GET http://localhost:4200/null 404 (не найдено)

а это мой перехватчик: 

   @Injectable()
export class RequestInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (req.url.includes('/Upload/')) {
            console.log('upload')
            req = req.clone({ headers: req.headers.set('Access-Control-Allow-Origin', '*') })
            return next.handle(req);
        }
        if (!req.headers.has('Content-Type')) {
            console.log('type')
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }
        req = req.clone({ headers: req.headers.set('Access-Control-Allow-Origin', '*') })
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

я не знаю, в чем проблема? в Front End или Backend ??

это запуск в ядре Asp: 

services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                  .AllowAnyMethod()
                  .AllowAnyHeader()
                  .WithOrigins("http://localhost:4200")
                  .AllowCredentials()
            .Build());

        });

в чем проблема? как я могу решить эту проблему ????

Ответы [ 2 ]

2 голосов
/ 07 мая 2019

Хотя другой ответ верен, если вы, однако, хотите определить конкретные разрешенные источники (и вы должны это сделать), вам следует удалить .AllowAnyOrigin() или SetIsOriginAllowed((host) => true) из вашего оператора CORS, и он будет работать с .AllowCredentials(). 

        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                  .AllowAnyMethod()
                  .AllowAnyHeader()
                  .WithOrigins("http://localhost:4200")
                  .AllowCredentials()
            .Build());

        });

И если вы хотите разрешить множественные источники, вы можете установить массив источников и использовать его в качестве параметра в .WithOrigins().Например: 

private readonly string[] MyAllowedOrigins = new string[] {
    "http://localhost:4200",
    "http://localhost:3000"
};

...
.WithOrigins(MyAllowedOrigins)
...

Также обратите внимание на используемую схему - проверьте, является ли она http или https.

Ради полноты, никогда не забывайте добавлять, например, app.UseCors("CorsPolicy"); где вы конфигурируете свой конвейер, например, метод .Configure в классе Startup.

В целом - хотя в некоторых случаях допускается любое разрешение на любое происхождение, вы обычно хотите и должны определитьв частности, разрешено происхождение.

Относительно SetIsOriginAllowed((host) => true) - это должно быть выражение для оценки того, должен ли быть разрешен источник, поэтому возвращение => true всегда может подойти для dev.насколько я могу судить, не должен использоваться в производственной среде.

Вы можете найти хорошее чтение в MS Docs.Оформить заказ:

2 голосов
/ 07 мая 2019

ASP.NET Core 2.2 не допускает комбинации AllowAnyOrigin и AllowCredentials. Вам нужно изменить AllowAnyOrigin на SetIsOriginAllowed: 

app.UseCors(builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .SetIsOriginAllowed((host) => true)
                .AllowCredentials()
            );
...