Shopify 应用程序 - 脚本标签 - 从商店检索数据时出现 CORS 错误

Question

概述

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

问题

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

我尝试过的

1. 安装koa/cors并设置 {origin: *}

代码

服务器.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());