why is the url malformed in get request with fetch API in JavaScript?

Question

I'm trying to get the latitude and longitude from the geocoder API using fetch in js. When I check the response , the url is malformed, and it prepend it with localhost.

const getLatLong = async () => {
        const response = await fetch(
            {
            url: 'https://geocoding.geo.census.gov/geocoder/locations/address?street=4600+Silver+Hill+Rd&city=Washington&state=DC&benchmark=2020&format=json;',
            mode: 'no-cors',
            method: "get",
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    "Content-Type": "application/json"
                }
            });

        console.log(response);

        const myJson = await response.json(); //extract JSON from the http response
        console.log(myJson);
        // do something with myJson
    }

Do you know what `mode: "no-cors"` does? You won't be able to read the response if using that — Phil, Jun 16 '21 at 22:46
`url` is not part of the `Request` init object. You should pass the URL in as the first parameter to `fetch()` instead. See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch. Also `Access-Control-Allow-Origin` is a **response** header; do not add it to your request headers. `GET` requests do not have a payload / body so do not need a `Content-type` header either — Phil, Jun 16 '21 at 22:48
I have tried to pass the url as a seperate parameter , but then in the response it became blank. — user2371290, Jun 16 '21 at 23:04
Did you read [my first comment](https://stackoverflow.com/questions/68010817/why-is-the-url-malformed-in-get-request-with-fetch-api-in-javascript?noredirect=1#comment120207857_68010817)? — Phil, Jun 16 '21 at 23:05
Why do you have those 2 headers? You are sending a request, not a response. — Shivam, Jun 17 '21 at 01:26
Does this answer your question? [Trying to use fetch and pass in mode: no-cors](https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors) — Phil, Jun 17 '21 at 12:04

Muhammed Bera Koç · Answer 1 · 2021-06-17T00:24:56.170

I think you want something like this.

const getLatLong = async() => {
  const response = await fetch("https://geocoding.geo.census.gov/geocoder/locations/address?street=4600+Silver+Hill+Rd&city=Washington&state=DC&benchmark=2020&format=json", {
    "headers": {
      "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
      "accept-language": "en-US,en;q=0.9,tr;q=0.8",
      "sec-ch-ua": "\" Not;A Brand\";v=\"99\", \"Google Chrome\";v=\"91\", \"Chromium\";v=\"91\"",
      "sec-ch-ua-mobile": "?0",
      "sec-fetch-dest": "document",
      "sec-fetch-mode": "navigate",
      "sec-fetch-site": "none",
      "sec-fetch-user": "?1",
      "upgrade-insecure-requests": "1"
    },
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": null,
    "method": "GET",
    "mode": "cors",
    "credentials": "include"
  });
  const myJson = await response.json(); //extract JSON from the http response
  console.log(myJson);
  // do something with myJson
}

getLatLong();

Edit: Oddly enough fetch only works in geocoding domain. I think this geocoding API has some problems or restrictions with CORS settings.

Maybe I should add that I'm using asp.net framework 4.8 and the url I get is redirected to "https://localhost:44302/Home/[object%20Object] — user2371290, Jun 17 '21 at 01:32

why is the url malformed in get request with fetch API in JavaScript?

1 Answers1