What I want: From the below URL, I would like to grab: Title, Was Price, Now Price, all colors aviable
https://www.michaelkors.com/mercer-gallery-medium-logo-tote-bag/_/R-US_30F1GZ5T6B?color=2170
After inspecting URL code, I need to grab data from the following classes product-name, listPrice and salePrice
Error: Access to XMLHttpRequest at 'https://www.michaelkors.com/greenwich-extra-small-studded-patent-leather-crossbody-bag/_/R-US_32F1GGRC5L?color=2711' from origin 'https://localhost:44329' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What I Tried:
var url = 'https://www.michaelkors.com/mercer-gallery-medium-logo-tote-bag/_/R-US_30F1GZ5T6B?color=2170';
var TitleClass = 'product-name';
fetch(url)
.then(res => res.text())
.then(text => {
document.getElementById('DisplayWebCode').innerHTML = text;
console.log(text);
})
.catch(err => console.log(err));<div id="DisplayWebCode">
</div>What you're trying to achieve is possible. Just not on browser javascript. You'll need NodeJS.
You can use web scraping technologies to render out web pages and extract the title, price etc. in the backend and serve that in an API and then make a fetch request to that from your frontend. You can use Puppeteer to do the scraping bit. Please check out Puppeteer for more info.