How to use fetch API to get HTML content in js All In One

How to use fetch API to get HTML content in js All In One

res.text()

same origin

CORS

fetch('https://cdn.xgqfrms.xyz/')
.then(function (response) {
  // The API call was successful!
  return response.text();
})
.then(function (html) {
  // This is the HTML from our response as a text string
  console.log(html);
})
.catch(function (err) {
  // There was an error
  console.warn('Something went wrong.', err);
});

errors

Content Security Policy

Refused to connect to 'https://www.cnblogs.com/xgqfrms/p/12818551.html' because it violates the following Content Security Policy directive: "connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org www.google-analytics.com stats.g.doubleclick.net".

Refused to connect to 'https://www.cnblogs.com/xgqfrms/p/12818551.html' because it violates the document's Content Security Policy.

fetch('https://tianqi.moji.com/weather/china/shanghai/pudong-new-district', { mode: "no-cors", })
.then(function (response) {
  // The API call was successful!
  return response.text();
})
.then(function (html) {
  // This is the HTML from our response as a text string
  console.log(html);
})
.catch(function (err) {
  // There was an error
  console.warn('Something went wrong.', err);
});

bug ???

fetch("https://tianqi.moji.com/weather/china/guangdong/guangzhou", { mode: "no-cors", })
.then(res => {
 console.log(`res =`, res)
 return res.text();
})
.then(html => console.log(`html =`, html.toString()))

//  res = Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
// html = 

fetch HTML

fetch("https://tianqi.moji.com/weather/china/shanghai/pudong-new-district", { mode: "no-cors", })
.then(res => {
  console.log(`res =`, res)
  return res.text();
})
.then(html => {
  console.log(`html =`, html)
  const parser = new DOMParser();
  const dom = parser.parseFromString(html, "text/html");
  console.log(`html dom =`, dom)
  // api data
  const todayWeather = dom.querySelectorAll(`.days`)[0].innerText.replace(/[\r\n]/ig, `,`).split(`,`);
  // ["今天", "阴", "21° / 30°", "南风", "4-5级", "55 良"]
  console.log(`todayWeather api datas =`, todayWeather);
})
.catch(err => {
  console.error('Failed to fetch html page content!', err);
});

demos

fetch('https://www.cnblogs.com/xgqfrms/p/12818551.html')
.then(function (response) {
  // The API call was successful!
  return response.text();
})
.then(function (html) {
  // This is the HTML from our response as a text string
  console.log(html);
})
.catch(function (err) {
  // There was an error
  console.warn('Something went wrong.', err);
});

SSR HTML page parser bug ???

not return html string ? blob

// puppeteer wait

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

refs

https://stackoverflow.com/questions/36631762/returning-html-with-fetch

https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---