Need to modify the URL inside a onClick function while invoking fetch in reactJS

Question

I am new to reactJS. The below snippet is to invoke a URL on a click event. But the URL fired is with the baseURI.

How can i truncate that or reset it ?

handleClick = (event) => {

 console.log("Got the row " + event );

 alert('The link was clicked.'+ event);
    fetch("www.google.com")
    .then(res => {
      console.log("Got the result "+   res.json());
    }
  );

};

The URL fired is

Response:

 {type: "basic", url: "http://localhost:3000/www.google.com", redirected: false, 
   status: 200, ok: true, …}
   (...)

  statusText: "OK"
  type: "basic"
  url: "http://localhost:3000/www.google.com"

I need to fire multiple calls within this handleClick event and then open a new tab if successful with the final URL along with the session key. The above code is just the beginning to check the calls work fine or not.

How should i truncate "http://localhost:3000" ??

Pass in complete url inside fetch for example `fetch("https://www.google.com")`. — Nuhman, Oct 15 '19 at 06:31

score 0 · Answer 1 · answered Oct 15 '19 at 06:38

0

Fetch API doesn't know that it's an external link. Add the protocol to your url, i.e. http:// or https://.

answered Oct 15 '19 at 06:38

Alserda

4,246
1
17
25

leads to this issue https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow – Shaik Md Oct 15 '19 at 06:51
just pass the fetch options: to allow cros – Eslam Abu Hugair Oct 15 '19 at 06:59

score 0 · Answer 2 · answered Oct 15 '19 at 06:46

0

Fetching API from external link, you need to add complete URL like

http://google.com

or

https://google.com

answered Oct 15 '19 at 06:46

Sultan Aslam

5,600
2
38
44

its giving exception in chrome https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow – Shaik Md Oct 15 '19 at 06:52
https://create-react-app.dev/docs/proxying-api-requests-in-development @ShaikMd – Sultan Aslam Oct 15 '19 at 06:58

score 0 · Answer 3 · answered Oct 15 '19 at 06:59

0

just pass the fetch options:

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})

answered Oct 15 '19 at 06:59

Eslam Abu Hugair

1,162
1
11
23

check MDN [docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) – Eslam Abu Hugair Oct 15 '19 at 07:12

Need to modify the URL inside a onClick function while invoking fetch in reactJS

3 Answers3