如何从 Sveltekit 执行 JSONP 请求？-解网

问：

我们正在经营一家 Shopify 商店，并且已经到了我们需要在内容方面具有更大灵活性的地步。我的解决方案是通过自定义CMS将内容传送到子域。我遇到的一个问题是将购物车内容从Shopify上的主域获取到子域上的Sveltekit解决方案（我需要在标题中显示购物车商品计数，并在侧边栏中显示购物车中的商品列表）。

不幸的是，仅获取cart.json就会出现 CORS 错误。我找到了一个使用 JSONP 的解决方案：

function getCartData(data){
  /* do something with the data. In this example we are just loggin it */
  console.log(data)
}

var script = document.createElement('script');
script.src = 'https://jasons-experiments.myshopify.com/cart.json?callback=getCartData'
document.getElementsByTagName('head')[0].appendChild(script);

来自此站点：https://freakdesign.com.au/blogs/news/get-cart-contents-via-jsonp。

我真的对如何从 Sveltekit 做这样的事情感到困惑。这甚至可能吗？

Shopify JSONP Sveltekit

由于您没有对机密或 API 调用执行任何操作，而只想将 JSON 发送到您控制的某个外部域，因此只需将服务器设置为对 CORS 友好，然后就可以对其进行 XHR 调用，而不会触发 CORS 异常。通常，这是一个非常容易的模组，您可以将其添加到您的服务器上。

let jsonpID = 0;

function jsonp(timeout = 7500) {
  const url = 'https://shopdomain.net/cart.json';
  const head = document.querySelector('head');
  jsonpID += 1;

  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    const callbackName = `jsonpCallback${jsonpID}`;

    script.src = encodeURI(`${url}?callback=${callbackName}`);
    script.async = true;

    const timeoutId = window.setTimeout(() => {
      cleanUp();

      return reject(new Error('Timeout'));
    }, timeout);

    window[callbackName] = data => {
      cleanUp();

      return resolve(data);
    };

    script.addEventListener('error', error => {
      cleanUp();

      return reject(error);
    });

    function cleanUp() {
      window[callbackName] = undefined;
      head.removeChild(script);
      window.clearTimeout(timeoutId);
      script = null;
    }


    head.appendChild(script);
  });
}

export default jsonp

在我的标头组件中，我只是等待结果：

import jsonp from '$lib/helpers/getCartData';
import { onMount } from 'svelte';

let cartData = jsonp();

onMount(async () => {
    console.log(await cartData);
})

上一个：如何通过 JSONP 将资产加载到 Phaser 中

下一个：将 GIANT JSONP 保存到数据库

如何从 Sveltekit 执行 JSONP 请求？

How can I do JSONP requests from Sveltekit?

评论

评论