How to get HTML file using javascript fetch api?

Question

1.00/5 (1 vote)

See more:

Problem: Fetching a different website html using javascript fetch() API from a website running on a localhost.

I need to do some scraping stuff from a local website.
I'm getting response status code "0" and no data in return to work with!
I've no idea how to make this work?

Response:

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}
body: null
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""
[[Prototype]]: Response

What I have tried:

When I tried this first I got CORS warning then I changed the mode to 'no-cors' but still it's not working.

Index.js File:

'use strict';

fetch('https://youtube.com', {
    method: 'GET',
    mode: 'no-cors',
})
.then(res => console.log(res))
.catch(err => console.log(err));

Need help!!

Posted 27-Feb-22 23:45pm

prajapatiabhishek31

Updated 28-Feb-22 2:11am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2022-02-28T01:56:00

Solution 1

This is precisely as the documentation says it should be:

Request.mode - Web APIs | MDN[^]:
no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. ... In addition, JavaScript may not access any properties of the resulting Response. This ... prevents security and privacy issues arising from leaking data across domains.

Specifying mode:'no-cors' is not a magic bullet to circumvent the cross-origin restrictions specified by the target site.

Unless you can get the cooperation of the owners of the target site, you will need to create a proxy script on your own server to request the remote resource.

Posted 28-Feb-22 1:56am

Richard Deeming

Comments

prajapatiabhishek31 28-Feb-22 8:34am

Thanks for answering! I'm new to CORS concept so I'm still trying to understand it but as far as I've understood that it won't work without my server getting whitelisted by the source itself. am right on that?

One more thing, when I try the same thing with a node.js script I get the html file. why is that?

const axios = require('axios').default;
axios.get('https://youtube.com')
.then(res => console.log(res))
.catch(err => console.log(err));

Richard Deeming 28-Feb-22 9:10am

Code running on the client won't be able to make cross-domain requests unless the target server explicitly allows it.

Code running on the server, including node.js, is not subject to the same restrictions.

prajapatiabhishek31 28-Feb-22 9:13am

Thanks a lot!

Richard MacCutchan · Answer 2 · 2022-02-28T02:11:00

Solution 2

You may want to investigate using the YouTube Data API | Google Developers[^].

Posted 28-Feb-22 2:11am

Richard MacCutchan