我想使用获取请求来解析市场页面。更准确地说:我有一个产品名称列表(未在下面的代码摘录中显示,但它存在于其他地方),对于每个名称,我想找到具有最高和最低价格的产品。找到这些产品后,我想检索有促销的价格、无促销的价格、产品名称和该产品的链接。
下面是我尝试获取上述数据的代码的一部分。然而,市场服务器的配置方式是,未为本地主机(我的项目当前正在其上运行)设置 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 并从页面读取所需的数据,就像我在上面的代码中尝试的那样?