Fetch HTTP Request and Navigate - Chrome

Question

Here is a sample POST request which I run inside the Console window of Chrome.

fetch("https://demo.wpjobboard.net/wp-login.php", {
  "headers": {
    "Host": "demo.wpjobboard.net:443",
    "Content-Length": "19",
    "Cookie": "wpjb_transient_id=1607759726-1847; wordpress_test_cookie=WP+Cookie+check",
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "body": "log=7887&pwd=789789",
  "method": "POST",
}).then(console.log);

I need to navigate and see HTML rendered results inside the chrome, not just seeing some complex results inside the console. How to achieve this?

sultan · Accepted Answer · 2021-06-17 06:45:42Z

1

Fetch returns promise and first what you get is streaming data from your server. You need to convert it to text or JSON after that you can use it like a normal variable.

I have moved your URL and options in separate variables in order to focus code on fetch request implementation.

const url = `https://demo.wpjobboard.net/wp-login.php`
const opts = {
  headers: {
    'Cookie': `wpjb_transient_id=1607759726-1847; wordpress_test_cookie=WP+Cookie+check`,
    'Content-Type': `application/x-www-form-urlencoded`
  },
  body: `log=7887&pwd=789789`,
  method: `POST`,
}

fetch(url, opts)
  .then(res => res.text()) // if you get json as response use: res.json()
  .then(html => {
    const win = window.open(``, `_blank`)
    win.document.body.innerHTML = html
    win.focus()
  })

edited Jun 17, 2021 at 6:45

answered Jan 3, 2021 at 11:00

sultan

4,7292 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Inside Man Over a year ago

thanks man, but it is really is not what I want. my post request tries to post a wrong user and pass to the page. then a message should appear on the page that says 'unknown username...`. But currently, all I get is some result on the console. I need to render and show the result HTML on window tab chrome. hope I'm clear :)

sultan Over a year ago

In the second then you get text response of the html and place check condition there. To open in a new tab you can use this window.open(url, '_blank').

sultan Over a year ago

I have updated my answer according to your message.

Inside Man Over a year ago

thanks, great. is there any way to force the browser to render the HTML to look better?

sultan Over a year ago

use css to make it look good, but that is another question and answer )

|

Collectives™ on Stack Overflow

Fetch HTTP Request and Navigate - Chrome

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related