Api working in browser but not in fetch javascript?

Question

I am using openweather api to create a weather application but my fetch api call is not working. My api call is working in browser but not in my code.

handleSubmit(){
    var city = this.state.city;
    var url = 'api.apixu.com/v1/current.json?key=67deb752d27d411a9ac101935181007&q=' + city;
    console.log(url);
    fetch(url, {
      method: 'GET',
      mode: "no-cors",
      headers: { 'Content-Type': 'application/json' }
    }).then((res) => {
      var resJson = JSON.parse(res);
      console.log(resJson);
      return resJson;
    }).then((resJson) => {

    }).catch((err) => {
      console.log("error");
    });
  }

You are making a GET request. There is no content in the request to describe the type of. headers: { 'Content-Type': 'application/json' } is utter nonsense (and is actively harmful as it makes the request require a preflight OPTIONS request). Remove it. — Quentin
– Quentin, Commented Jul 10, 2018 at 10:38

Quentin · Accepted Answer · 2018-07-10 10:38:26Z

3

Problem 1

Your URL is wrong.

var url = 'api.apixu.com...

You forgot the scheme (https:// or something should be at the front of that).

Problem 2

You said mode: "no-cors" which means:

I want to make this HTTP request, but I am not going to do anything that requires permission, so don't ask for permission, don't do anything that needs permission, and don't throw errors if I don't get permission

Reading data from a different origin requires permission. Since you said you didn't want permission, you can't read the data and it fails silently.

Remove mode: "no-cors". Use mode: "cors" instead.

answered Jul 10, 2018 at 10:38

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Tibebes. M · Accepted Answer · 2020-10-04 09:42:00Z

2

I had the same issue and the only thing that worked for me was to send my request to a proxy server.
This redirect did not work too:

const baseUrl = 'https://cors-anywhere.herokuapp.com'

After troubleshooting this issue for a long time, I redirected the response to another website and finally works.

const App = () => {
  ....

  const baseUrl = 'https://thingproxy.freeboard.io/fetch/';

edited Oct 4, 2020 at 9:42

Tibebes. M

7,6285 gold badges18 silver badges39 bronze badges

answered Oct 3, 2020 at 11:56

Teresa Fitzgerald

195 bronze badges

Collectives™ on Stack Overflow

Api working in browser but not in fetch javascript?

2 Answers 2

Problem 1

Problem 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Problem 1

Problem 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related