使用 Laravel 作为后端时，Angular 包 simple-pdf-viewer 'Access-Control-Allow-Origin' CORS 问题

Posted 2023-03-04

【中文标题】使用 Laravel 作为后端时，Angular 包 simple-pdf-viewer \'Access-Control-Allow-Origin\' CORS 问题

【英文标题】：Angular Package simple-pdf-viewer 'Access-Control-Allow-Origin' CORS Issue While Using Laravel As Backend使用 Laravel 作为后端时，Angular 包 simple-pdf-viewer 'Access-Control-Allow-Origin' CORS 问题

【发布时间】：2018-12-19 09:53:26

【问题描述】：

我正在开发需要在网页上显示 PDF 的 Angular 应用程序。为了实现这一点，我正在使用包 simple-pdf-viewer。 当我给出我的本地 PDF 文件的路径时，这个包工作正常，比如local-path ，但是当我给出我的实时服务器的路径时，比如live-path 然后它给了我错误

localhost/:1 无法加载 https://booksapi.alphawods.com/storage/app/pdf-test.pdf：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:4200' 因此不允许访问。

我使用 Laravel 作为后端，而 Angular 在前端。通常这是我已经配置的 Laravel 的常见 CORS 问题，并且我对服务器的所有请求都工作正常。

这是在我的服务器上使用的有效 CORS 文件屏幕截图。 cors

这是调用 pdf 资源的 simple-pdf-viewer 代码

public openUrl(url: string, startAt: SimplePDFBookmark = SimplePDFBookmark.EMPTY_BOOKMARK) debugger
  this.http.get(url,  responseType: 'arraybuffer',withCredentials: false )
  .subscribe((file: ArrayBuffer) => 
    this.openDocument(new Uint8Array(file), startAt);
  , error => 
    this.onError.emit(error);
    this.loaded = false;
  );

我已经在 GitHub 上阅读了与此相关的问题，但找不到解决方案。这是该问题的链接related-issue

【参考方案1】：

您需要配置的另一件事是您的 Web 服务器 (nginx/apache) 以允许 CORS。在Laravel 中间件上添加CORS 配置仅在请求命中您的Laravel 应用程序时才有效。由于您直接访问文件，因此永远不会添加额外的标题，因为它没有命中任何 Laravel 路由，对吧？所以请求只会由网络服务器处理。

我希望这能给你一些提示。