我需要从后端下载图像 Asp Core 2.2 并在 Angular 中显示它。
i 为以角度显示图像创建一个组件:
在 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' });
}
现在,当我需要显示图像时,它会在控制台中向我显示此错误:
在“中”访问XMLHttpRequesthttps://localhost:44372/Uplaod/NewsPictureFolder/NewsMainPicture/903797628068313.jpg“从起源”http://localhost:4200'已被CORS策略阻止:请求的资源上不存在'Access Control Allow Origin'标头。
GEThttp://localhost:4200/null404(未找到)
这是我的拦截器:
@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());
});
问题出在哪里?我该如何解决这个问题????
ASP。NET Core 2.2不允许将<code>AllowAnyOrigin</code>和<code>AllowCredentials</code>组合在一起。您需要将AllowAnyOrigin
更改为SetIsOriginAllowed
:
app.UseCors(builder => builder
.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials()
);
虽然另一个答案是正确的,但是如果您想要定义特定的允许原点(您应该这样做),您应该删除< code >。AllowAnyOrigin()或< code > SetIsOriginAllowed((host)= 1
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
。
为了完整起见,请不要忘记添加例如<代码>应用程序。UseCors(“CorsPolicy”)
配置管道的位置,例如。在
方法。启动
类中配置
总而言之——虽然在某些情况下允许任何来源是可以的,但您通常希望并且应该专门定义允许的来源。
关于<code>SetIsOriginAllowed((主机)=
您可以在MS Docs上找到很好的阅读。结帐:
我有一个amp list元素,它的src是一个搜索。包含产品信息的php文件。 在验证时,我认为tld没有AMP访问控制允许源代码源标题,尽管我已经设置了一个。以下是php文件: 和html: 我做错了什么?我已经阅读了这里的其他问题,并试图修改我的代码,但没有成功。
我将JSON对象存储在Amazon S3中,我想从Javascript直接从S3加载数据。我的GET看起来很普通: 我得到以下错误: 我可以使用curl从S3获取URL,或者直接从浏览器导航到S3。我真的要通过自己的服务器代理所有这些请求吗?
我得到访问控制允许来源错误。 CORS策略阻止从来源“https://localhost:44322”访问“https://localhost:44301/api/xxxx/getallxxxx”处的XMLHttpRequest:对飞行前请求的响应未通过访问控制检查:请求的资源上没有“access-control-allog-origin”标头。 下面是我的头,我已经传递给api调用。 我是否丢失
问题内容: 我使用Node / Express创建了一个小型API,并尝试使用Angularjs提取数据,但是由于我的html页面在localhost:8888上的apache下运行,而node API在端口3000上进行侦听,我得到了否’Access-Control-允许原产’。我尝试使用 和Vhosts Apache,但没有成功,请在下面查看完整的错误和代码。 XMLHttpRequest无法
我在从我的网站链接加载字体时遇到问题。在我所看到的server.js中有一个错误,即CORS不在我的标题中。现在,我的问题是如何将标题插入我的server.js有人能帮我吗? 这里是错误 源“我的网站链接”中的字体已被跨域资源共享策略阻止加载:请求的资源上不存在“访问-控制-允许-原点”标头。因此不允许访问原点“http://localhost:3001”
我在做一个离子应用程序。我的问题是:当我试图从服务器获取数据时,我得到了这样的结果: $http.get(url).success(函数(响应){...}