如何在Angular中动态嵌入Cloudinary中的第三方javascript小部件？

当我试图下载并使用带有Angular HttpClient的Cloudinary小部件javascript资源时，我遇到了一个CORS错误

发生了什么事？我对HttpClient或CORS并不陌生，但从未见过这种情况

CORS策略已阻止从源站访问位于的XMLHttpRequest:请求的资源上不存在“Access Control Allow origin”标头

服务器CORS与此问题无关。它是公开的代码，可以在任何浏览器中轻松检索

请求的脚本确实到达了我的Chrome开发工具/网络选项卡XHR部分。所以服务器发送了它，Chrome很高兴地收到了它

我在角开发环境中

问题在于Angular，我认为是HttpClient。它认为不存在CORS问题

开发工具中的请求头：Sec Fetch模式：cors

我看过很多其他的SO帖子，包括一篇看起来很相似但没有帮助的帖子

我的密码

导出类CloudinaryComponent实现OnInit{ 专用url=https://widget.cloudinary.com/v2.0/global/all.js'; 建造师 私有http:HttpClient {} 恩戈尼特{ 这个.loadWidget； } //加载Cloudinary上载小部件代码，而不是小部件GUI。 私有loadWidget{ 返回this.http.getthis.url； }; //单击按钮调用上载小部件GUI。 私人通话弹出窗口{ this.loadWidget.subscribe结果=>{ //this.uploadWidget.open； }; } } 如何正确嵌入Cloudinary小部件？

问题 不要忽略错误消息。CORS问题与服务器没有提供正确的头来允许从您的网站跨源访问javascript代码有关！正如错误所说

请求的资源上不存在“Access Control Allow Origin”标头

问题不在于你的客户。Angular没有创建此错误。出于安全原因，您的浏览器正在阻止请求。服务器刚刚决定不允许此类请求。您可以直接从浏览器访问资源这一事实可能会愚弄您，但在这种情况下，您可以以不同的方式访问资源，即不是从javascript XMLHttpRequest访问资源

如果您想完全理解CORS，请阅读：

解决方案 使用HttpClient下载javascript文件将无法使用该小部件！您必须在html中嵌入cloudinary js文件才能使用它

动态嵌入和创建javascript小部件的服务可能如下所示：

从“@angular/core”导入{Injectable，renderFactory2，renderR2}； 从“rxjs”导入{Observable，of，fromEvent}； 从“rxjs/operators”导入{map}； 声明let cloudinary:any；//声明js小部件变量 常量widgetUrl=https://widget.cloudinary.com/v2.0/global/all.js'; @注射的{ providedIn:'根' } 导出类CloudinaryService{ 私有渲染器：渲染器2； 构造函数渲染器工厂：渲染器工厂2{ this.renderer=renderfactory.createrendernull，null； } //创建上传小部件 createUploadWidgetdata:any，callback:error:any，result:any=>void:Observable{ 返回此.skriptexistswidgetur //嵌入js->直接调用js函数 ？ofcloudinary.createUploadWidgetdata，回调 //js未嵌入->嵌入js文件并等待加载 ：fromEventthis.addJsToElementwidgetUrl，“加载”。管道 //映射到js函数的调用 mape=>cloudinary.createUploadWidgetdata，回调 ; } //检查js文件是否已嵌入 私有skriptExistsjsUrl:字符串：布尔值{ return document.querySelector`script[src=${jsUrl}`？true:false； } //在html中嵌入外部js文件 私有addJsToElementjsUrl:string:HTMLScriptElement{ const script=document.createElement'script'； script.type='text/javascript'； script.src=jsUrl； this.renderer.appendChilddocument.body，脚本； 返回脚本； } } 使用组件中的服务创建小部件：

导出类AppComponent实现OnInit{ 小工具：任何； constructorprivate cloudinary:CloudinaryService{} 恩戈尼特{ this.cloudinary.createUploadWidget { cloudName:“我的云”， 上传预设：“我的预设” }, 错误，结果=>{ if！error&&result&&result.event==成功{ console.log'Done！这是图像信息：'，result.info； } } .subscribewidget=>this.widget=widget； } openWidget{ 如果这个.widget{ 控制台。记录“打开” this.widget.open； } } }

---

非常感谢。我以前和CORS合作过，我认为我了解所有这些。他们的服务器似乎允许有限的请求。我是通过html脚本设置获得信息的，但这对我来说似乎很奇怪。似乎我应该用脚本创建一个对象，然后从t开始

---

这里有代码。误导的是，脚本下载时，我可以在开发工具中看到它，所以服务器似乎没有问题。我可以看到我的实现是@Preston如果你的整个应用程序都在使用Cloudinary小部件，并且你不介意在启动时加载js，那么你显然可以将标签添加到index.html中。我假设您希望在初始化特定组件时，在特定请求上动态加载脚本，这就是我回答中的服务所做的。是的，您是对的。只有几个组件需要这个小部件。这是应用程序的一小部分。再次感谢您，我相信这个Angular/Cloudinary代码对未来的许多程序员都会很有用。网上没有这样的东西。