如何从没有 Access-Control-Allow-Origin header (JS) 的网站页面解析数据?

问题描述 投票:0回答:0

我想使用获取请求来解析市场页面。更准确地说:我有一个产品名称列表(未在下面的代码摘录中显示,但它存在于其他地方),对于每个名称,我想找到具有最高和最低价格的产品。找到这些产品后,我想检索有促销的价格、无促销的价格、产品名称和该产品的链接。

下面是我尝试获取上述数据的代码的一部分。然而,市场服务器的配置方式是,未为本地主机(我的项目当前正在其上运行)设置 Access-Control-Allow-Origin 标头 - 因此我最终会在 CORS 策略中阻止我对服务器的请求。

async function findProductWithMinOrMaxPriceWb(productName, mode = "min") {
  const sortMethods = ["priceup", "pricedown"];
  let link;
  let query;

  mode === "min"
    ? (query = `https://www.wildberries.ru/catalog/0/search.aspx?sort=${sortMethods[0]}&search=${productName}`)
    : (query = `https://www.wildberries.ru/catalog/0/search.aspx?&sort=${sortMethods[1]}&search=${productName}`) &&
      (mode = "max");

  return fetch(query)
    .then((response) => response.text())
    .then((html) => {
      const parser = new DOMParser();
      const htmlDocument = parser.parseFromString(html, "text/html");
      const product = htmlDocument.documentElement.querySelector(
        ".product-card-list > article > div > a"
      );
      link = product.href;
      return fetch(link); // to retrieve price and name we have to go to another url
    })
    .then((html) => {
      const parser = new DOMParser();
      const htmlDocument = parser.parseFromString(html, "text/html");

      const name = htmlDocument.documentElement.querySelector(
        ".product-page__header > h1"
      ).innerHTML;
      const priceWithSale = htmlDocument.documentElement.querySelector(
        ".price-block__final-price"
      ).innerHTML;
      const priceWithoutSale = htmlDocument.documentElement.querySelector(
        ".price-block__old-price"
      ).innerHTML;

      return [name, priceWithSale, priceWithoutSale, link];
    });
}

结果我收到一个预期的错误:跨源请求被阻止:同源策略不允许读取远程资源https://www.wildberry.ru/catalog/0/search.aspx?sort=priceup&search=Frosch 。 (原因:CORS 标头“Access-Control-Allow-Origin”丢失)。状态代码:200。

但是,使用 DevTools 并进入 FETCH/XHR 部分,我设法找到了 URL 获取,我收到了我需要的所有内容,除了带有最高/最低价格的产品链接。这比没有好,但对我来说仍然不是解决方案。

这让我想到了最初的问题:是否有任何方法可以绕过 CORS 并从页面读取所需的数据,就像我在上面的代码中尝试的那样?

javascript dom cors fetch
© www.soinside.com 2019 - 2024. All rights reserved.