如何为 SAP 电商云每个不同的 JavaScript Storefront 分别配置 API endpoint

简介: 如何为 SAP 电商云每个不同的 JavaScript Storefront 分别配置 API endpoint

需求

客户有多个 JS 店面,并希望将每个店面连接到不同的 API 端点,但默认情况下,所有 JS 店面都绑定到同一个 API。

当前的实现

除非显式配置 OCC 基本 URL,否则云门户(Cloud Portal)中的 第一个 API 端点将是与每个 JS Storefront 关联的端点。

解决方案

解决方案

每个 JS Storefront 应用程序都应该使用 index.html 中的元标记明确定义 OCC 基本 URL,例如下面的代码:

<meta name="occ-backend-base-url" content="https://my-custom-backend-url:8080" />

开发人员可以使用特殊的 HTML 元标记配置基本 URL,而不是在 Spartacus 配置中使用 provideConfig() 对其进行硬编码。 这允许您仅使用一个已编译的 JavaScript 应用程序就可以部署到不同的环境,因为您只需为每个环境修改 index.html 文件的元标记。


app.module.ts 中的 provideConfig() 中 backend.occ.baseUrl 的值优先于 meta 标签中的值,因此如果客户希望 base URL 由 meta 标签动态驱动,请不要定义 provideConfig() 中的 baseUrl。


实际项目中一个常见的问题是,Spartacus 意外通过公共网络而不是内部向 API 服务发送请求。


下列是正常的请求:

https://api.<project-name>-<customer-name>-<environment-id>-public.model-t.cc.commerce.ondemand.com/occ/v2

下列是错误的请求:

https://api.<customer-domain>.com/occ/v2

引起这个错误的原因是,由于理解错误,occ-backend-base-url 的值被不正确的修改/自定义。

下面是一个错误的实现:

<meta n

正确实现:

<meta name="occ-backend-base-url" content="OCC_BACKEND_BASE_URL_VALUE" />

只有使用正确的占位符 OCC_BACKEND_BASE_URL_VALUE,在部署到 CCV2 时,这个占位符才能被 API aspect 中的实际的 API endpoint 正确地替换。

有两种配置为 Spartacus 配置 CORS 的方式。

方式1:Local Properties Configuration

通过 hac、服务配置或 manifest.json 引用的属性文件更改属性。

方式2:Global CORS configuration

在 Backoffice 配置:

第二种配置具有更高的优先级。逻辑在

de.hybris.platform.core.cors.web.DefaultCorsConfigurationSource 中实现, 代码如下。


全局 CORS 配置存储在 CorsConfigurationProperty 项内的数据库中。 这是全局并适用于连接到集群的所有节点。


数据库中的属性优先于本地属性。 如果有相同的属性 context 和 key 在数据库和属性文件中都配置,值取自数据库。


相关文章
|
25天前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
22 0
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
91 24
|
2月前
|
JSON JavaScript 前端开发
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
72 0
|
2月前
|
JavaScript 前端开发 Java
|
4月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
4月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
|
4月前
|
监控 安全 数据管理
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
|
4月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
|
4月前
|
XML 网络安全 开发工具
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
下一篇
DDNS