How to change domain of url using fetch method?

Question

For example, I have some basic form:

var formElem = document.getElementById("some_basic_form");
formElem.onsubmit = async(e) => {
  e.preventDefault();

  let fullUrl = document.getElementById('shorten_url').value
  let formData = new FormData();
  formData.append('fullUrl', fullUrl);

  let response = await fetch('/url-shortenerer/create', {
    method: 'POST',
    body: formData
  });

  let result = await response.json();

  alert(result.message);
};

<form action="http://localhost:8080" method="post" id="some_basic_form">
  Full url: <input id="shorten_url">
  <input type="submit">
</form>

I want to send a POST request to the backend service, but I see, that request sent via 63342 port, not 8080. How to solve it?

your front app run under the port `63342` , try using `await fetch('http://localhost:8080/url-shortenerer/create'...` or `await fetch(formElem.action+'/url-shortenerer/create'...` — Spring, Mar 09 '21 at 06:30

score 0 · Answer 1 · answered Mar 09 '21 at 06:35

0

Here, You have to specify the full URL.

...
let response = await fetch("http://localhost:8080/url-shortenerer/create", {
...

answered Mar 09 '21 at 06:35

Devendra

55
1
10

@SlandShow is this not working? This should send the request to 8080, try using `console.log` to see the response – AHMED SAJJAD Mar 09 '21 at 06:38
@AHMEDSAJJAD I see some CORS issues – SlandShow Mar 09 '21 at 06:45
@SlandShow https://stackoverflow.com/a/18399709/11757950 check this for cors error in php – AHMED SAJJAD Mar 09 '21 at 06:49
@SlandShow Is the issue regarding the port is solved? – Devendra Mar 09 '21 at 06:56

score 0 · Answer 2 · answered Mar 09 '21 at 07:15

0

I think providing the mode property with the init object will fix the CORS errors.

let response = await fetch("http://localhost:8080/url-shortenerer/create", { 
    mode: 'cors',
    method: 'POST',
    body: formData
});

answered Mar 09 '21 at 07:15

lafleur

107
8

How to change domain of url using fetch method?

2 Answers2