112. 使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误

已于 2024-09-27 16:00:26 修改
阅读量904 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 一套适合 SAP UI5 开发人员循序渐进的学习教程 文章标签： ui ui5 SAP UI5 Fiori sap
于 2022-07-28 14:46:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/126034853

本教程我们已经花了三个步骤的篇幅，介绍了 SAP UI5 FileUploader 的使用方法，实现原理，以及引起跨域访问错误的根源。

我们再次回顾一下这个跨域访问的错误根源：

(1) 我们开发的 SAP UI5 应用，向 XML 视图里，FileUploader 控件的 uploadUrl 硬编码的 localhost:3003 发起文件上传请

了解本专栏 订阅专栏 解锁全文
111. SAP UI5 FileUploader 控件实现本地文件上传，接收服务器端的响应时遇到跨域访问错误
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-28 504
使用 SAP UI5 FileUploader 控件上传本地文件时，为什么回到跨域访问错误(Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame)？本文将详细分析原因。
SAP UI5 FileUploader 的本地文件上传技术实现分享
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-27 725
SAPUI5FileUploader底层可以基于form的multipart/form-data或者XHR两种技术方式进行文件上传，这在下面的源代码看得很清楚。点击uploadFile之后，执行submit之前，都可以正常访问this.oIFrameRef.contentWindow.location.href。按钮选择本地文件的时候，会各触发一次。当我们使用SAPUI5的FileUploader控件，上传本地文件时，其执行逻辑的入口，就是。...
nwabap-ui5uploader:此模块允许开发人员将SAPUI5OpenUI5源上载到SAP NetWeaver ABAP系统中
05-14
nwabap-ui5uploader 此模块允许开发人员将SAPUI5 / OpenUI5源上载到SAP NetWeaver ABAP系统中。 该行为与（或应该是）与SAP Web IDE应用程序部署选项“部署到SAPUI5 ABAP存储库”或Eclipse通过“ UI开发工具包HTML5”可从“ SAPUI5 ABAP存储库团队提供程序”获得的行为相同。 ”。 开发此模块的主要原因是将部署过程集成到持续集成环境中，例如，在前面的所有构建步骤都可以的情况下，Jenkins服务器将执行几个构建步骤，最后将源部署到SAP NetWeaver ABAP系统。 该插件还允许开发人员通过npm脚本使用与Eclipse或SAP Web IDE不同的IDE（例如WebStorm）通过npm脚本将源部署到SAP NetWeaver ABAP系统。 基于grunt-nwabap-ui5uploader软件
视频上报跨域，实际上是nginx限制了上传文件大小
zhaixing
10-27 972
今天在上传视频时网站出现问题 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 但是文档和图片都是没问题的，跨域也都是设置好的 开始以为是视频上传的接口有问题，在本地和postman请求接口都是正常的 最后想到nginx的配置文件中有个
SAP UI5 文件上传到后台
Joker's blog
11-12 584
try { if (file) { this._bUploading = true; var that = this; // var _handleSuccess = function(data) { var _handleSuccess = function(event, xhr, settings, data) { that.UploadDialog.close(); var oFileTableModel = that...
24. 使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-06 776
我们部署在本地开发环境运行的 SAP UI5 应用，由于`浏览器安全策略`的限制，无法直接访问远端 OData 服务，原因是我们的 SAP UI5 应用本地运行在 `localhost` 这个域名上，而远端请求的 OData 服务的域名比如说 `services.odata.org`，二者不是同一个域名，由于浏览器安全策略，浏览器拒绝这种`跨域的` HTTP 访问请求。
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
热门推荐
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 2万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
SAP UI5 开发里命令行 ui5 serve 和 npx fiori run 有什么区别？
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-03 769
有朋友按照笔者这两套 SAP UI5 开发教程，分别进行 SAP UI5 Freestyle 和 Fiori Elements 的开发学习，对于 `ui5 serve` 和 `npx fiori run` 这两个命令行的使用辨析上产生了一些疑问。本文就来详细阐述这两个命令行工具的差异。 这两个命令行都是用于在本地运行 SAP UI5 应用程序的命令，但是它们有一些区别。 `ui5 serve` 更加轻量级和灵活，适用于 SAP UI5 本地开发环境，而 `npx fiori run` 则更加全面和自动化
110. SAP UI5 FileUploader 控件深入介绍 - 为什么需要一个隐藏的 iframe
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-27 1327
对 SAP UI5 控件实现原理感兴趣的朋友，一定不能错过这篇文章。本文深入阐述了 SAP UI5 FileUploader 控件在运行时是为什么要渲染出 HTML 原生的 form 和 input 这两个元素，以及为什么要引入一个 display 属性为 hidden 的隐藏 iframe 来作为 form 表单的 target 属性。所有这些疑问，都在本文得到解答。...
fineuploader 跨子域上传文件 cookie丢失问题的解决
过客阵营 -- 简单的就要最简单
10-14 469
目前的项目中,使用到了fineuploader 这个纯html5上传组件,在开发过程中将上传服务单独放置在特定子域下.登录cookie设置的domain 是在根域下,在后端代码中进行用户登录检测,发现总会被重定向302到未登录页面,排查之后发现是ajax xhr请求中未带cookie造成的   网上大概搜了下, 写道 原生ajax请求方式：var xhr = new XMLHttpReq...
jmeter通过files Upload方式发送请求，返回500错误的解决——编码问题
lanniya152的博客
01-31 2695
背景说明：发的post请求比较大，直接粘贴在jmeter的bodydata上，jmeter容易卡死，所以就将json数据保存在txt里面，然后用fileupload功能直接上传。 可是又遇到问题了，用脚本生成的txt可以传成功，手动保存的不能成功，为什么呢？如下图： 后来经过一番摸索，将txt保存时用UTF-8编码，成功解决 在测试中和json打交道，特别容易出现编码问题，遇到要...
用ajaxFileUpLoad上传文件不能正确取得返回值的问题
08-13 1万+
刚开始没有觉得ajax请求的dataType参数的重要性，用了ajaxFileUpLoad插件后，如果页面代码如下： fileElementId : ['imageToUpload'], url : 'url', dataType : 'json',返回类型为json数据，那么后台处理上传后，必须将返回值封装成json格式的数据返回给前台页面。 后台封装如下： return "{\"res
SAPUI5上传图片或者其他文件 front-end
Olivia1202的博客
09-04 953
由于本地环境有set-cookie的问题，所以这里不使用eclipse，使用web ide进行开发测试。 1 在neo-app.json文件中引入destination。也可以使用manifest.json的视图管理器加入对应server的odata service,这样可以不用手动追加。 这样也可以避免https使用ajax时,http协议被block的情况。 2...
webuploader 跨域问题
程序猿踩坑集锦
04-17 1万+
项目中用到了上传组件 ，经过对比决定使用Webuploader 。详细使用文档请参考官方文档：官方文档。这里只介绍垮与问题。 Webuploader上传，会执行2个请求；一个option请求，一个post（根据你的webuploader的配置method 值决定），需要在option请求中对响应头进行处理，post响应头也进行响应的处理。 第一种：以servlet为例： @WebServle
ajaxfileupload上传文件跨域实战解决
u012927379的博客
04-27 2万+
前言： ajaxfileupload跨域文件上传会遇到2个问题 1：跨域访问以json，xml格式返回，直接报406 网上查了设置服务器端直接设置header内容 Access-Control-Allow-Origin：* 或者 Access-Control-Allow-Origin：www.test.com 起不到作用还是报406 2：跨域获取不到 body中的返回值 ajaxfileupload是通过iframe提交post表单形式实现异步不跳转上传，把值赋值在iframe 中的body标
利用ajaxfileupload.js实现跨域上传图片并处理返回的数据
sgx791300332的专栏
08-19 8268
在开发中遇到跨域上传图片并且需要处理返回的数据。网上找了很久
ng2-file-upload跨域上传不了
大强博客
09-07 1454
错误信息： Failed to load http://localhost:9000/partner/upload: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must ...
elementui上传upload跨域的解决办法
bittingCat的博客
03-24 3182
<el-upload class="avatar-uploader" :action="action" :data="upLoadData" name="imageFiles" :show-file-list="false" :on-success="handleAvatarSuccess" :headers
通过ajaxfileupload上传图片的时候，跨域问题的解决
周呆呆的备忘中心
11-01 4561
     今天在解决图片上传的问题的时候，遇到了一个错误：后端controoler返回的结果是对的，在网页的network上也可以看到调用成功，并且有返回值，但是在ajaxfileupload的success回调方法中，获取的data一直是undefined。通过js 的debug，最终发现问题出在： 这里的body为空，原因是无法跨域获取返回数据。 这是因为我前端页面和后端是分开部署的，两...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值