asp核心和angular7中没有“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】asp核心和angular7中没有“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header in asp core and angular7

【发布时间】：2019-09-24 17:21:11

【问题描述】：

我需要从后端 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' );
 

现在当我需要显示图像时，它会在控制台中显示此错误：

从源“http://localhost:4200”访问“https://localhost:44372/Uplaod/NewsPictureFolder/NewsMainPicture/903797628068313.jpg”处的 XMLHttpRequest 已被 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);
    

我不知道问题出在哪里？在前端还是后端？？

这是在 Asp 核心中的启动：

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

        );

问题出在哪里？这个问题怎么解决？？？

【问题讨论】：

尝试删除.WithOrigins("http://localhost:4200")

@JohanP 它不工作的人

【参考方案1】：

虽然另一个答案是正确的，但如果您想要定义特定的允许来源（并且您应该），您应该从您的 CORS 语句中删除 .AllowAnyOrigin() 或 SetIsOriginAllowed((host) => true)，它将与 .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"); 您在哪里配置管道，例如Startup 类中的 .Configure 方法。

---

总而言之 - 虽然在某些情况下允许任何来源都可以，但您通常希望并且应该专门定义允许的来源。

关于SetIsOriginAllowed((host) => true) - 这应该是一个表达式来评估是否应该允许来源，使其始终返回=> true，在开发人员下可能没问题。环境，但据我所知不应该在生产中使用。

您可以在 MS Docs 上找到很好的阅读材料。结帐：

Enable Cross-Origin Requests CorsPolicyBuilder AllowAnyOrigin WithOrigins SetIsOriginAllowed

【参考方案2】：

ASP.NET Core 2.2 不允许 AllowAnyOrigin 和 AllowCredentials 的组合。你需要把AllowAnyOrigin改成SetIsOriginAllowed：

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