javascript - 如何在 BigcCommerce 商店中使用 JavaScript 安全地实施第三方 API 调用？

Question

我想在 BigCommerce 产品页面上向承运商发出一些 API 请求，并且我有一些我不想在我的 JS 代码中显示的请求的凭据。根据 BigCommerce 的具体环境，我无法对后端代码进行任何更改。我读了很多类似的问题，现在只有一个问题。

使用我自己的 API 后端 Web 服务器来存储凭证信息并将 POST 请求发送到第三方 API 是否只有一种方法可以做到这一点？然后我将使用 POST 请求通过 JS 到我自己的 API 接收该信息。

我试图在 nginx 网络服务器上运行 Ruby API 应用程序。但是，它没有成功，因为浏览器根据 CORS 策略阻止了我的 fetch() 请求。我尝试将 Access-Control-Allow-Origin: * 参数添加到服务器响应标头中，将其写入 ruby​​ 配置文件，但浏览器无法识别它。我也尝试在 nginx 端设置配置文件，但这对 CORS 策略响应没有帮助。这很有趣，因为使用 Restlet 应用程序我收到了来自我自己的 API 应用程序的响应，其中包含正确的信息和状态“ok”。

(async function application() {
  let dataRuby = {
     url: 'http://IP_address/index',
     body: {"name": "21312", "year": "2019"}
  };
  function getApi(data) {
     let myInit = {};
     myInit.method = "POST"; 
     myInit.body = JSON.stringify(data.body);
     myInit.headers = {
        'Content-Type': 'application/json'
     };
     let myRequest = new Request(data.url, myInit);
     return fetch(myRequest).then(
        res => res.json()
     );
  }
  let response = await getApi(dataRuby);
  console.log(response);
})()

CORS 策略已阻止从源“null”获取http://IP_address/index的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

标签： javascriptapipostbigcommerce