Shopify应用-脚本标记-从存储中检索数据时发生CORS错误

Question

概述

我在Koa服务器中有一个自定义的REST API，我可以使用react在Shopify应用中正常访问它。但是，当我尝试从脚本标签访问它时，出现CORS错误。

问题

我无法从脚本标签访问我的自定义REST API数据，但可以从Postman和我的React应用程序访问它。

我尝试了什么

1. 安装koa/cors并设置{来源：*}

代码

server.js

   server
      .use(router.routes())
      .use(router.allowedMethods())
      .use(CORS({ origin: "*" }));

      router.get("/api/test", async (ctx, next) => {
        ctx.body = {
          llama: "123",
        };
      });

script_tag.js

  async function hello() {
    await _loadScript(
      "https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js",
    );
    const data = await window.axios.get(
      "https://3b1b4258759f.ngrok.io/api/test?shop=panda-app-tests.myshopify.com",
      {
        crossDomain: true,
      },
    );
    console.log(data);
  }

关于不使用cors-anywhere怎么解决这个问题的任何想法？预先非常感谢。

图像

Answer 1

这最终是一个愚蠢的错误。我必须先添加koa-cors中间件。因此，在server.js文件中应如下所示：

server
  .use(CORS({ origin: "*" }))
  .use(router.routes())
  .use(router.allowedMethods());